Split <ul> into two columns with CSS2

Question

Is there a good cross-browser solution for splitting one <ul>into two columns, or is the best approach still to use two separate lists placed next to each other? I am looking for one solution, so CSS3 tolerance is not allowed if alternative HTML code requires support for older browsers.

Requires browser support IE7 +, FF3 +.

Answer 1

I made a JSFiddle with basic non-CSS3, which seems to work. There should be a cross browser and may be a good base for you to start working on a specific solution.

Check out the CSS here:

ul {
    width:340px;
    margin:0;
    padding:0;
}

ul:after {
    content:".";
    clear:both;
    height:0;
    display:block;
    visibility:hidden;
}

ul li {
    margin:0 0 0 30px;
    padding:0 0 10px 0;
    float:left;
    display:block;
    width:140px;
}

http://jsfiddle.net/grahamzibar/zdBvk/