How to create three columns in css

Question

If I have a list of objects such as List myObjects; and there might be 2, 20, 50 etc items in the list.

What I want is to be able to itterate through the list and build a 3 column view of the items using css to layout the columns.

How do I do this? I don't want to do a loop where every three items I start at 1 again or is that the only way?

Can I simply loop through the items, place each object into a div and have the columns build themselves?

Answer 1

If order doesn't matter, then put them in a ul of fixed width, and then create the unordered list with the list items at 1/3 of the ul's width and floated left.

So

.three-column{
 width: 300px;
}

.three-column li {
 float: left;
 width: 100px;
}

and then go nuts

Check out: http://www.alistapart.com/articles/multicolumnlists/