Multiple Column Lists

CSS3 has the promise of allowing text to flow into multiple columns. We just have to wait umpteen years until it's both standardized and adopted. Until then... [CSS3 multicol Working Draft]

If you want to split a single list across multiple columns, you have a number of options without having to resort to breaking it into multiple separate lists.

Float list items

A simple solution is to float each of your <li>s with a defined width in the same direction. The width of the <ul> will determine how many columns you have.

This produces a list that reads left to right then down, rather than down then right, like so:

-AAA -BBB

-CCC -DDD

-EEE -FFF

This is usually not a problem with unordered lists, but is not desirable for ordered lists, so read on if this solution doesn't work for you.

Examples:

[1]

Using child selectors

This method produces lists that read down then right, like so:

-AAA -DDD

-BBB -EEE

-CCC -FFF

However, the CSS can become unmanageble for all but the smallest lists, but it has the advantage of not tying the markup to the presentation.

This method does not work in IE versions < 7, of course, because IE does not understand child selectors.

Examples:

[2]

Manipulating margins of list items

This method also produces lists that read down then right, but the code is more streamlined. It could be more streamlined still by only using one class per row. If you look at the example, classN could be replaced with col(N%5) (so class1..class5 become col1, class6..class10 become col2, etc.) and adding an additional class to each item that starts a new column (to set the margin-top).

Unfortunately, this heavily ties the markup to the presentation.

Caveat: When links are added to the list items, the first column of list items are unclickable in IE6.

Examples:

[original method]

[method that fixes IE6 link problem]

[Adaptive Path example] The "team" box on the adaptive path home page uses this technique and works in IE6.

Articles

A free article describing how to accomplish both the float and negative margin methods is available at Community MX by John Gallant and Holly Bergevin:

[Do You Want To Do That With CSS? - Multiple Column Lists]

A free article illustrating six methods of marking up and styling multiple-column lists, by Paul Novitski:

[CSS Swag: Multi-Column Lists]