How to break up an HTML List using CSS Only

Question

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/

Jared · Accepted Answer · 2011-09-26 18:47:46Z

1

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

answered Sep 26, 2011 at 18:47

Jared

1,4601 gold badge13 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

webworm Over a year ago

Nice guide. Very thorough. Thank you!

Michael · Accepted Answer · 2011-09-26 18:58:09Z

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

Use Floats
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/

Casemiro · Accepted Answer · 2011-09-26 19:33:52Z

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

Collectives™ on Stack Overflow

How to break up an HTML List using CSS Only

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related