css3-mulitple-columns

CSS3 Multiple Columns

We’ve all had it, you speak to a new customer on the phone and tell them to come to the meeting with an example of what they want the site to look like and either it some monstrosity created by their niece’s boyfriend in word (with fuchsia comic sans header) or it’s a catalogue from 1991 beautifully done (but only once “not spending that sort of money again”).
You know you should walk away but it’s your wife’s mate’s husband’s Dad and his little ornament carving business is a brilliant niche, you’ve got a tonne of ideas and if you can build a great site, smash the seo he could have a great page rank that you can lever for your own site.
“I want it to just look like this” a multiple column page layout with inline images perfect for print a nightmare for CSS. (Well it’s not really that hard but I’m trying to increase the drama for effect so bare with me!)
So what do we do set four divs up named something semantic like col-1,2,3,4, well you used to but not any more because (like you didn’t know already because you are reading a page about them) in CSS3 you can declare multiple columns, how wide and how they should be styled very simply.

How do we do it?

As usual this feature is only supported at the moment by Firefox and Safari/Chrome, although as with a lot of the CSS3 stuff IE will follow suit later although as of writing IE9 hasn’t support for this feature and it’s still in beta so we may be waiting a while but hey we’re still waiting for full support of CSS2 so don’t be disheartened.

Anyway back to it. There are 4 properties that relate to the multiple column layout in CSS3, allowing you to set the number of columns, width, gap between each column and a border between each:

  • column-count
  • column-width
  • column-gap
  • column-rule

So lets see how this works in our browsers that support this property. Again because this is still officially unsupported we have to put the browser specific css properties. I’ve created a class on the surround div called .multipleColumns for obvious reasons

1.
2.
3.
4.
5.
6.
7.
8.

.multipleColumns {
-moz-column-count: 4;
-moz-column-gap: 10px;
-webkit-column-count: 4;
-webkit-column-gap: 10px;
}

So the first rule tells the browser how many columns we want and the second is the gap between the columns.

Heres what it looks like. CSS3 Multiple Columns Demo

You can also add dividing lines lets look at how we implement this.

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

.multipleColumns {
-moz-column-count: 4;
-moz-column-gap: 10px;
-moz-column-rule: 1px solid #666;
-webkit-column-count: 4;
-webkit-column-gap: 10px;
-webkit-column-rule: 1px solid #666;
}

And heres what it looks like.

CSS3 Multiple Columns with Rule Demo

In conclusion…

The thing that I love about CSS in general is the power it gives you and as you get better and better with it it is such a time saver. Learn it, practice it so you will be ahead of the game. Almost all of these improvements to CSS are making life as a front end developer easier and multiple columns is one of those. Now if only the browsers could keep up…..