How to break up an HTML List using CSS Only

I would like to create a list that adds columns as necessary depending on how many list elements are present. Currently I only know how to do this using a table, which I would like to avoid. Is there a 开发者_开发知识库way to do this using CSS only?

I have created an example of how I currently do it with tables on JSFiddle.net ...

http://jsfiddle.net/9W33K/

There is a pretty thorough (albeit a bit older) guide I've looked at before here: CSS Swag: Multi-Column Lists

There's two ways I can think of that you can go about it.

1. Use Floats
2. Use CSS3 Columns

With floats you will get a pattern like this:

Item 1 Item 2
Item 3 Item 4

With CSS3, you don't get very much browser support (no IE support until IE10).

Fiddle with both examples: http://jsfiddle.net/DThhT/1/

You can mimic a HTML table using css display:table property. You'll be able to replace those <tr> and <td> with <div>.

More info here: http://www.w3.org/TR/CSS2/tables.html#table-display