CODEWITHSUNDEEP
htmlcross-browsercss
shanethehat
shanethehat

Reputation: 15570

Split <ul> to two columns with CSS2

Is there a good cross browser solution for splitting a single <ul> into two columns, or is the best approach still to use two separate lists floated next to each other? I'm looking for a single solution, so no CSS3 goodness is permitted if it would require alternative HTML to support older browsers.

Required browser support IE7+, FF3+.

Upvotes: 5

Views: 11507

Answers (1)

Graham Robertson
Graham Robertson

Reputation: 818

I made a JSFiddle with basic non-CSS3 that seems to work. Should be cross-browser and might be a good base for you to start tinkering a specific solution.

Here's a peek at the CSS:

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/

Upvotes: 3

Related Questions