CODEWITHSUNDEEP
htmlcss
Kumar
Kumar

Reputation: 5147

How can I print an html list in two columns just using markup and CSS?

I have a list, ul or ol, with n list items (lis), how can I convert this list into a two independent column list items by just using CSS & html?

Upvotes: 0

Views: 1024

Answers (3)

kingsong
kingsong

Reputation: 41

At this point, not in the way you probably want to, at least not reliably cross-browser. It is easy to make it two columns where the list would look like:

record 1    record 2
record 3    record 4

To do that you would just float each li left.

Someday you'll be able to do it across browsers - it is coming in CSS3.

Upvotes: 3

Paul
Paul

Reputation: 141877

If you know exact widths something like this will work quite well:

ul{
    width: 300px;
    overflow: hidden;
}

ul li{
    float: left;
    width: 150px;  
}

JSFiddle

Upvotes: 1

Arnaud Le Blanc
Arnaud Le Blanc

Reputation: 99921

You can do that by floating the lis, and forcing them to have a width of 50%:

ul {
    overflow: hidden;
}
ul li {
    width: 50%;
    float: left;
}

Try it here: http://jsfiddle.net/KzCxh/

Upvotes: 5

Related Questions