Multiple Column Lists

From CSS Discuss

Jump to: navigation, search

Contents

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> elements 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:

List Columns - example by Alex Robinson.

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 unmanageable 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:

List columns - example courtesy of Chris Casciano

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:

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

A free jQuery plugin that automatically styles multiple-column lists, by Fred Kelly: Multi Column Lists meet jQuery

Personal tools