An (Almost) Complete Guide to CSS3 Multi-column Layouts

Filed September 20th, 2010 under CSS and Tutorial

One of the defining features of print design is the ubiquity of multi-column layouts. And there are a couple of good reasons why this is the case.

First of all, it’s generally easier to read lines of text between 8 and 12 words long. Second, it’s easier to control the amount of negative space in a layout with columns. For a long time, this was the primary advantage of print but CSS3 makes multi-column layouts possible online (and without the need for JavaScript).

W3C Specification: http://www.w3.org/TR/css3-multicol/

Browser Specific Support

WebKit support: Strong

Firefox support: Strong

IE9 support: None

The multi-column model

The WC3 specification introduces a number of new properties that allow us to define columns in HTML layouts. Just like print designs of old, we’re able to define the number of columns, column width, column gaps, and even rules governing overflow.

Essentially, the specification states that a multi-column element needs to have either a defined column width or column count. Browsers are supposed to render these elements similar to the way they render tables – but the content in a column layout is dynamically split into blocks.

At the moment, we’re not able to define certain properties about columns (like column-specific backgrounds), but it’s possible this might change.

The number and width of columns

column-count and column-width are the two most basic ways to define the properties of a multi-column element.

column-count

By default, column-count is set to auto. This means that if we explicitly define the column-width, the browser will sort out for itself how many columns are necessary to populate the content in the multi-column element. Obviously, that’s not always desirable so we’ll want to explicitly define the number of columns to span the content across. And it’s easy to do:

#multicolumnElement {
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
}

column-width

As I mentioned, we can define column-width without defining the number of columns, and the browser will render our content dynamically (there are some fine controls available too – keep reading for those). To define column-width, we can use any of the units regularly available to CSS properties (em, px, %, etc).

#multicolumnElement {
	-webkit-column-width: 15em;
	-moz-column-count: 15em;
	column-count: 15em;
}

Of course, we can always combine column-width and column-count:

#multicolumnElement {
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
	-webkit-column-width: 15em;
	-moz-column-width: 15em;
	column-width: 15em;
}

Column gaps and rules

All print designers are familiar with column widths and gaps, but web designers are addicted to the language of margins and padding.

But column gap is exactly as it sounds – the size of the space between columns defined in any unit regularly available in CSS (em, pixel, etc).

column-gap

The WC3 specification defines 1em as the default column-gap value, so we’ll use it in this example:

#multicolumnElement {
	-webkit-column-gap: 1em;
	-moz-column-gap: 1em;
	column-gap: 1em;
}

column-rule

Column rule is another throwback to the print era. Basically, column rules are thin lines between the columns, to further aid readibility and/or to distinguish between separate stories. CSS3 gives us three different properties for the column rule: column-rule-size, column-rule-style, and column-rule-color, but we can use the shorthand column-rule to declare values for all three at once.

As you might have guessed, the regularly available units, styles, and color values can all be used:

#multicolumnElement {
	-webkit-column-rule: 1em solid #000;
	-moz-column-rule: 1em solid #000;
	column-rule: 1em solid #000;
}

Column breaks

What if I want to break the column before an h3 tag, you ask? Well, that’s easy too. CSS3 gives us the column-break property with a number of possible related properties and values, including: auto, always, avoid, left, right, page, column, avoid-page, and avoid-column.

column-break

So if we want to break the content before every h3 tag we simply include the column-break-before property in our stylesheet:

h2 {
	-webkit-column-break-before:always;
	-moz-column-break-before:always;
	column-break-before:always;
}

Spanning columns

If we want an element, say a headline, to span across multiple columns we can make use of the new column-span property.

column-span

column-span has two possible values: all, and regular numbers (e.g. 1,2,3). Defining column-span as all means that the given element will span across the whole multi-column block, while assigning it a regular number will limit its span to that number of columns:

h2 {
	-webkit-column-span:all;
	-moz-column-span:all;
	column-span:all;
}

h3{
	-webkit-column-span:2;
	-moz-column-span:2;
	column-span:2;
}

Filling columns

Just like print design, we might want some finer control over how columns are filled with content. CSS3 introduces column-fill to give us that kind of control.

column-fill

We can either define a value of auto or balanced. The former will sequentially fill columns with content, while the latter evenly distributes the content.

#multicolumnElement {
	-webkit-column-fill:auto;
	-moz-column-fill:auto;
	column-fill:auto;
}

Demo!

To cap things off, I’ve created a quick demo project based on the first few paragraphs of Moby Dick. It should display correctly in both WebKit and Mozilla based browsers (though it’s not formatted properly for mobile).

Click here for a live preview or click here to download the project files.

Other Resources

Introducing the CSS3 Multi-Column Module by Cedric Savarese

Remembering: The CSS3 Multi-Column Layout Module by Web Designer Notebook

Joshua Kelly
Director of Human/Machine Synthesis

58 Responses

§ l0jack wrote on September, 20th:

There’s an error in your first example of column-width, you’re still using column-count in that example.

§ John wrote on September, 20th:

Looks beautiful and will be fantastic when supported – but it not workee on my Firefox 3.6.10 on OS X

§ Beben wrote on September, 20th:

your live demo no good in mozilla 3.6…?

§ Rob Belics wrote on September, 20th:

W3C is spelled W3C.

§ Lars Weimar wrote on September, 20th:

This is so fantastic and will finally render the need of Frameworks like 960 (although I LOVE 960) a thing of the past.

§ Stuart wrote on September, 20th:

It’s really nice… only I didn’t know that when I took a look in FF first! ;) Don’t forget the non webkit rules, matey! (I do this a LOT too! :) )

§ Greg Babula wrote on September, 20th:

I’m really disappointed that there is no IE9 support for this

§ Ash wrote on September, 20th:

Do you know if ie9 will ever support this? or is it just that the beta does not yet?

§ Peter Craddock wrote on September, 21st:

I’ve been working on a way to use multi-columns to emulate the behaviour of a book, not only in CSS3-compatible browsers but also others (Opera & IE are my main targets), and it is possible.
This goes a bit beyond the “simple” multi-column layout, as it treats two columns as one unit to be shown.

I wrote a tutorial on multi-page, multi-column layouts that can be applied to any website, and I’ve created two book-like examples using page turn effects, one with an “old book” appearance and the other without the use of images (thus looking “new”).

I’d be interested to see more applications of that!

§ Jean-Philippe HALIMI wrote on September, 22nd:

Too bad you have not used the -moz prefix to make it work in Firefox in your live demo. For the first letter “C” of your demo, why did you not use the :first-letter pseudo element ?

Anyway, very interesting tutorial, thanks for that :)

§ Andreas Fritsch wrote on September, 22nd:

Why the demo only show the webkit code?

§ ysbreker wrote on September, 22nd:

Why do you only use the webkit declarations on the demo page?

§ Roebie wrote on September, 23rd:

I’m using FF 3.6.10
If I understand your article right I should be seeing http://www.kmsm.ca/wp-content/uploads/2010/09/multicolumn.html in columns. I’m not however. What could be wrong?

§ Peter Gasston wrote on September, 23rd:

You’ve only included the -webkit- properties in your demo, so it doesn’t work in Mozilla browsers.

§ Rik wrote on September, 23rd:

The live preview doesn’t include Gecko properties and therefore it’s not working on Gecko browsers.

§ Paul wrote on September, 23rd:

Good article, with some clear explanations! Unfortunately your demo doesn’t work in FF because you’ve omitted the -moz declarations, just a head’s up! Also, in your column-break code above you used an H2 tag when you talked of an H3.

Nice work other than that :)

§ adevane wrote on September, 23rd:

Thanks! Was just fretting over doing this correctly and now I have some help.

§ Jim L. wrote on September, 23rd:

You’ve only included WebKit rules in the demo, so it doesn’t work in Gecko browsers.

Also, it’s W3C (World Wide Web Consortium) not WC3.

§ Udo wrote on September, 23rd:

Hey, your article starts with a big fat red O, and the you forget to mention Opera and its Presto-Engine under “Browser Specific Support”. Seems Opera does’nt suppport it, demo is shown one-column’ed.

§ Joshua Kelly wrote on September, 23rd:

Thank you all for the comments. I’ll address a few things quickly:

1) Yes, I’m an idiot – I neglected the -moz delcaration in the demo. It’s a terrible habit of mine, and I’ll be changing it momentarily. Please accept my apologies, and you can be sure I won’t repeat that mistake again!

2) Thank you Jim for point out the W3C typo – again, an embarrassing mistake, but I’ve fixed it.

3) As far as I’m aware, IE9 will not support multi-column layouts – and it’s not just a limitation of the beta. However, I don’t necessarily think this is much of a problem.

4) Jean-Philippe: A very good observation. I’ll be changing that habit (as they say, old habits die hard).

5) This is actually the first post in a series on CSS3. I’m going to cover all of the candidate/draft modules by January, so if you’ve liked this type of content there’s more of it coming.

One of the strongest practical applications of the multi-column layout module, as far as I can see, is in the mobile field which, thankfully, is dominated by WebKit with strong Gecko and Presto presences.

§ Raphael wrote on September, 24th:

Hello,

I think that it would have been useful to explain that column-break, column-span or column-fill doesn’t work on any browser now :)

For exemple, you applied a column-span on your h1, wicht is *not* in your multicolumn div.

§ MB wrote on September, 26th:

Your description is good, but the demo does not work! I tried it on all versions of FX 3.5.x to 3.6.x, but it failed :(

§ Joshua Kelly wrote on September, 26th:

Sorry about that MB! It should be fixed now!

§ Roebie wrote on September, 27th:

Yes it is! NOW you have a nice article!

§ Johannes Tröger wrote on September, 30th:

Wow. Now the client are able to require their website to look like a print layout…

§ Steven wrote on October, 1st:

Hi, thanks for the article, but what’s happened to the project source? Link’s not working.
Cheers.

§ Theo wrote on October, 1st:

Excellent. Works fine for me in FF 3.6.10. Unsurprisingly, it doesn’t work in IE8 but is still perfectly readable in IE8. Can’t believe IE9b isn’t supporting it yet. MS need to get a move on.

Time to move forward.

§ simon wrote on October, 1st:

opera not sho 3 columns only firefox

§ thebeno wrote on October, 2nd:

Firefox shows demo OK, opera not. I hope that Opera is most W3C standard following browser and if something is not good in opera is not good at all.
When will be demo working in Opera too?.

§ Tim Keating wrote on October, 3rd:

To avoid problems with the separate -moz and -webkit extension properties, may I suggest a look at LESS (lesscss.org)? You can make a simple sheet that defines the correct CSS3 properties as mixins containing the extension properties ONCE, then anytime in the future you need to use those properties, it will compile your inputs to the correct sets of values.

§ Tim Keating wrote on October, 3rd:

That demo layout is gorgeous, by the way.

§ Gerd Kamp wrote on October, 3rd:

AFAIR only column-span: all worked in Mobile Safari (on iPad) Do you if this has changed?

§ Joshua Kelly wrote on October, 3rd:

Thanks Tim!

§ mathieu wrote on October, 4th:

I applaud the column-count:auto default. The user knows best! For example, if the user has the browser width too small to accommodate three columns, let the browser change it the layout to two columns. Web page designs should not be fixed width; the browser has moved design beyond the restrictions of paper pages.

§ Toni L wrote on October, 7th:

On my FF (Mozilla/5.0 (Windows; U; Windows NT 6.1; fi; rv:1.9.2.10) Gecko/20100914 Firefox/3.6.10) the dropcap can only be 3em if it’s bigger it will overlap with the other text.

§ gd77 wrote on March, 1st:

Opera 11 does not support this feature norethe fading transition of css images

§ Dustin Wilson wrote on June, 1st:

@GD77: Yes it does, but you have to future proof the CSS for it to work. Instead of the -moz-column-count and -webkit-column-count garbage you just use column-count for instance. Opera will display multiple columns then.

Any CSS written with vendor-specific properties that have basis in a standard should also include the standard’s property as well. It’s stupid not to.

§ xiabolai wrote on June, 25th:

hi, thanks for this. i’m using it to split a wordpress archive page into to columns. it’s working perfectly in Chrome and Firefox. but in safari, the text is breaking into two columns, HOWEVER the associated thumbnails are not. so what i have is a two columns of text, but the post thumbnails are running all the way down the left column. any ideas?

thanks

§ Blitz wrote on September, 3rd:

There’s a bug with multicolumn lists. If using a navigation list (ul, or ol) – which is pretty standard and I believe ‘correct’ semantic markup for HTML5, if you set list-style, the multicolumn breaks – in both Safari and Firefox.

That means you can only create a multicolumn navigation list with bullets showing! Is this an oversight?

§ Jason Garber wrote on January, 12th:

You should note that the column break properties won’t work in Firefox. We should all go upvote the issue on Bugzilla so hopefully it can get implemented: https://bugzilla.mozilla.org/page.cgi?id=voting/user.html&bug_id=549114#vote_549114

§ Rav17 wrote on March, 9th:

Hi. Did you try to print this from Chrome? It works only for a screen content. :-(

Leave a Reply