CSS3 multiple column lists

For years I’ve been telling people that they couldn’t have the columns the way they wanted.

Why?

The main reason is because I don’t like suggesting people use javascript to manipulate the content of their pages.

Those days are fast approaching being over now that clients are beginning to accept three key things

1. you can progressively enhance your website.
2. your website can progressively degrade
3. your website doesn’t need to look the same in every browser

But I digress.

[box type=”info”]
Note: If you’re just looking for the quick and dirty example of how to do this you can go straight to the JSBIN example to see.
[/box]

Lists

There are two basic types of lists, ordered lists and unordered lists.

It’s usually pretty easy to decide which one you’re going to use. If you’re listing something in order, like the top 10 way to style lists, use an ordered list. If you’re listing something because it needs to be listed, like the contents in your bag or the navigation on your site you use an unordered list.

Fancy Lists

The issue with lists are they are usually left aligned and don’t usually span the width of a page.

This isn’t a problem for unordered lists, because you can set the <li> to float:left; and you have all of your list items in a horizontal rather than vertical list.

If you want them in two columns, then you simple set the width of the <li> tag to be 50% of the container width…either the <ul> or containing <div>.

The trouble comes when you want to do something similar with an ordered list. This method will have the lists running
1 2
3 4
5 6

…not very helpful for someone trying to read it in order.

To over come this we can take advantage of the CSS3 property column-count to achieve that for us.

CSS3 column-count lists

All we need to specify is how many columns we want, and the gutter space between the columns and the content will adjust itself whether there are 10 items or 1000.


.columns {
-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
column-count: 2;
column-gap: 20px;
}


Important note about css3 column lists

If you apply this class directly against the <ol> tag you lose the numbering on the list items. I’m sure there’s a good explanation for this, but I’m not sure what it is just yet.

To get the effect you need to apply the class to a containing div on the <ol> and it splits them up perfectly.

I’ve written this up in jsbin so you can play around with it yourself.