Remembering: the CSS3 multi-column layout module

29 November 2009, in CSS | 18 comments »

Because I will not shut up about CSS3, this time I’ve decided to show you a little bit of the multi-column layout module. This module allows you to layout the content of an element in multiple columns, like flowing text on a newspaper-type layout.

CSS Modules

Just to briefly make sure everybody understands what I mean by “modules”, the development of CSS3 has been divided in different Modules. For example, there is a Selectors Module, a Values and Units Module, a Backgrounds and Borders Module, etc.

Some of these Modules are at a more advanced stage of development and closer to being final than others. You can take a look at the Current Work table here.

Browser support

Let’s get this straight right away: only Safari and Firefox are currently supporting (some) of this module’s features, namely the properties column-count, column-width, column-gap and column-rule. Other browsers will render the content as if there were no columns at all.

There are more properties on the specs (and Safari supports a few more), but I’ll only mention these in this article, so we can all get a taste of what’s goin’ on.

Also, I’ve picked this particular module, because it’s one of the few that is actually in “Last Call” status, so it’s closer to being finished than others.

The markup

For this example I grabbed some text from the excellent Blind Text Generator and created a basic page with some divs and paragraphs.

Here’s an example of one of the divs:

<div id="text1">

	<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.</p>

	<p>His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me? " he thought. It wasn't a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls.</p>

	<p>A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer.</p>

	<p>Gregor then turned to look out the window at the dull weather. Drops of rain could be heard hitting the pane, which made him feel quite sad. "How about if I sleep a little bit longer and forget all this nonsense", he thought, but that was something he was unable to do because he was used to sleeping on his right, and in his present state couldn't get into that position. However hard he threw himself onto his right, he always rolled back to where he was.</p>


I’m just going to quickly show what each of the properties does. To use them, we’ll need to apply vendor-specific properties: for Safari the properties will be prefixed with -webkit- and for Firefox with -moz-. Annoying, but nothing we’re not used to, right?

Please follow the examples below on this page.


The CSS for our first div will be the following:

#text1 {	
	-webkit-column-width: 200px;
	-moz-column-width: 200px;
	column-width: 200px;

This will create 200px wide columns until the width of the page is filled, with no gap between the columns.

Each column within the element is called a column box. A column box doesn’t have its own properties, like background, padding or margins (at least not for now, but that may change for future specs). Also, all columns within a row have the same width and the same height.

The column-width property is not definitive—it is actually the optimal size we want the columns to have, but that may vary if the container is wider or narrower than it would be required to fit those measures.

column-gap and column-rule

Now let’s add some space between the columns and a nice rule, shall we?

#text2 {	
	-webkit-column-width: 390px;	
	-webkit-column-gap: 20px;
	-webkit-column-rule: 1px solid #000000;
	-moz-column-width: 390px;
	-moz-column-gap: 20px;
	-moz-column-rule: 1px solid #000000;
	column-width: 390px;
	column-gap: 20px;
	column-rule: 1px solid #000000;

In this example, we are defining a gap between each column of 20px and also adding a rule between each of them.

The column-rule property follows the syntax of the border property. Also, the column rules don’t take up any space—if they are wider than the column gap, they will (or should) overlap the content.

The column gaps and column rules are all the same within a row.

Ignore the colourful blocks in this example for now, I explain those bellow.


On our third example, we will specify how many columns we actually want the element to have:

#text3 {	
	-webkit-column-width: 200px;
	-webkit-column-count: 4;
	-webkit-column-gap: 20px;
	-moz-column-width: 200px;
	-moz-column-count: 4;
	-moz-column-gap: 20px;
	column-width: 200px;
	column-count: 4;
	column-gap: 20px;

If both column-width and column-count are specified (like in this example), the column-count value will be regarded as the maximum number of columns. So if only 3 columns fit in the element, but you’ve set it to have 4, only 3 will be created.

If you don’t specify the width of the columns, the column-width will be calculated automatically according to how many columns you have specified.

Images, etc.

You can have elements, like images, along the text, and even float them or make them a percentage in width. That percentage will be calculated according to the width of the column box they are in.

To test this theory, I added 3 coloured divs to the second example (#test2), with some inline coding (oh, the horror!). The first, red, div is floated but it has a width of 140%; the second, green, div is not floated and it’s also 140% wide; and the third, yellow, div is floated, but has 100% width .

According to the W3C specification, this is what should happen:

Content in the normal flow that extends into column gaps (e.g., long words) is clipped in the middle of the column gap.

Floats that are wider than the column box intrude into neighboring columns.

Correct me if I’m wrong, but for what I see on these examples, Firefox is overflowing both 140% divs, even if the second one is not floated. Safari doesn’t do better: it’s overflowing neither of them.

More overflowing stuff

As a final example, I’m creating a div with a smaller width and a set height. I’m making the overflow visible, and see what happens…

#text4 {	
	height: 200px;
	width: 500px;
	overflow: visible;
	border: 2px solid red;
	-webkit-column-width: 200px;
	-webkit-column-gap: 20px;
	-moz-column-width: 200px;
	-moz-column-gap: 20px;
	column-width: 200px;
	column-gap: 20px;

According to the specs, this is what should happen:

A multi-column element can have more columns than it has room for due to:

  • Constrained column height. […]

In continuous media, the columns that do not fit within the multicol element are added in the inline direction.

In human language, that means if the content is to be overflown, then it should be to the sides. In this case, Safari seems to be getting it right, while Firefox overflows the content vertically if the height is set via the max-height property, but correctly if via the normal height property. Take a look at the last block on the example page (with the red border).

Final words

And that’s it! I just wanted to remember you of this wonderful CSS3 feature that can make our lives a lot easier—and that degrades quite nicely for browsers that don’t support it.

I keep looking for examples of the multi-column layout in the wild, but I don’t think a lot of people are using it now. For what it’s worth, I’m using it on my personal site,, and it’s also in use on the tweetCC website.

Do you know of any more websites using it?

This article has been translated to Belorussian by Amanda Lynn.

  • Good post. Omniweb also renders correctly :)

  • Please don’t shut up about CSS3… just go on and on and… :) Maybe browsers will listen eventually!

  • Great article. I’m actually using multi columns in combination with media queries on my blog now:

    The problem is that Safari tends to cut up images and flash content and distributes them into several columns. I’m still sticking with it anyway because I really like the concept of multi columns but I get a lot of comments like “your layout is broken in Safari”.

  • Really interesting. One thing though, works perfect with chrome 3.

  • I’ve worked with HTML5 and CSS3 all day long the whole last week. The column-count feature is one of the best features in CSS3.

  • We could really use this for our online catalog content. Has anyone seen a javascript workaround in which a css DIV could be formatted multi-column?

  • I’ve been using columns on my blog for some time and really like the newspaper look they bring. But the problem with floated boxes is preventing me from using images on the first page. Floating images, wider than the column and having the text float around them would be really great, but for now both Firefox and Safari are taking it wrong.

  • Great post!

  • Just in time. Right as the newspapers are all dying out we have the new CSS property to make our websites look like newspapers. It’s pure genius. Can’t wait for CSS3 to be finalized.

  • @Josh, don’t wait, start using it now! Different parts of CSS3 are supported by the modern browsers, so you can add nice eye-candy to your website without hurting the browser-handicapped users.

  • Excellent!

  • All I can say is our team is so excited for CSS3 and HTML5, we’ve already started to work on them with some clients.

    We are doing progressive enhancement so people that have the browser capabilities get the extra goodies, but the ones without don’t have a bad experience.

    Learned a lot at the latest Future of Web Design….

  • I am currently using this in a new project, however floated images within a CSS3 column has a few issues. Other than that, it is really cool

  • this is really cool. i’ve learned a lot from here. thanks

  • I’ve worked with HTML5 and CSS3 all day long the whole last week. The column-count feature is one of the best features in CSS3. But the problem with floated boxes is preventing me from using images on the first page.

  • Matt

    Just wanted to check if anybody has found problems with Apple browsers and HTML5 video in columns.
    Specifically, on the iPad a ” element isn’t repositioned into a second column (while other elements do correctly).
    On the desktop Safari, the poster displays in the correct position, but when the mouse moves over it, the video isn’t visible.
    Firefox positions it correctly, but doesn’t support the video format I’m using, but at least the position is correct.

  • Being able to have elements, like images, along the text, and even float them or make them a percentage in width is amazing. Thanks for explaining this to me.

  • Chris

    Anyone know of a way to use the multi column layout and have the overflow scroll horizontally, basically add columns.

    I tried giving my container div a height of 100%, and this worked with firefox, but not chrome.