Multi-column layout with CSS3 (and some JavaScript)

There’s a common newspaper and print layout method where the text of an article is arranged over several columns. This makes the article easer to read and looks quite nice visually. Wouldn’t it be great if you could do this with CSS? Well, in fact this is perfectly possible using the multi-column layout module that is part of the CSS3 specification. Whilst browser support for this is patchy, the module is approaching candidate recommendation status, and the method can still be implemented using proprietary but well-supported CSS rule prefixes like -moz- and -webkit- in your style sheets. For browsers that do not support the multi-column layout module in any form, there’s a useful JavaScript solution.

Info: The JavaScript is not a new method. It was described in an article about CSS3 multi-columns on A List Apart. It was published a few years ago but I only read it recently. The article caused me to think: shouldn’t we be using CSS3 more these days? I kinda think we should. That’s one of the reasons for this post.

Here’s my first multi-column example which shows a <div> with pale green background containing several paragraphs. If you view this with Firefox or Chrome or Safari, you can see that the paragraphs are divided over several columns. Looks neat doesn’t it? This effect is achieved without the use of extra <div> elements or floats but just by using the following declarations in your style sheet:

 .columns {
          -moz-column-count: 3; 
	  -webkit-column-count: 3;
	   column-count: 3;
           }

Easy enough isn’t it? Just assign the column-count property and its value to your containing element [in my case a <div> with class = “columns”]. The <div element can contain as much content as you want, for example paragraphs or other elements like images, and these get divided up into three columns. We need to use the -moz- and -webkit- prefixes to get this to work in Mozilla and Webkit-based browsers and the ‘official’ column-count property for browsers that start supporting this. Browsers like Internet Explorer will not see the columns in the example. If you use this method, you might decide that’s OK.

A few more column properties

In the second example, I have added a double ‘border’ using column-rule and chosen a column-gap of 40 px.

 .columns {
	background: #E7F3CF;
	padding: 10px;
	-moz-column-count: 3; 
	-moz-column-gap: 40px;
	-moz-column-rule: 3px double #666;
	-webkit-column-count: 3; 
	-webkit-column-gap: 40px;
	-webkit-column-rule: 3px double #666;
	column-count: 3; 
	column-gap: 40px;
	column-rule: 3px double #666;
}

There are other properties of the multi-column layout module that you can use. For example, column-width to specify a width in pixels.

JavaScript for wider browser support

Of course, we know that browser support for the multi-column methods is pretty much restricted to the Firefox and Safari browsers using their -moz- and -webkit- prefixes. What about Internet Explorer? In this case, there is a JavaScript method that enables support and allows you to implement some of these properties. In fact, you do not need to use the -moz- and -webkit- rules either. See my third example which uses an external style sheet that is parsed by the JavaScript. This example works with Internet Explorer 6, 7 and 8, Firefox 2 to 3.5, Safari 3 and 4, and Opera 9.6.

Note: In this case, the styles need to be in an external style sheet. In my testing, you cannot have comments in your style sheet for this to work. This method extends the support for multi-columns but it’s a while since this script was released and I suggest that you test it thoroughly.

You could also put the script into a conditional comment so that it only applies to Internet Explorer. That’s up to you but I quite like this method myself.

I hope this post reminds you about the JavaScript solution that was described in this multi-column A List Apart article and highlights the multi-column layout properties that are in CSS3. Additionally, I hope that it encourages you to try these new properties. I certainly have a few plans for using these myself.

Update: The Columnizer jQuery plug-in is another JavaScript method that will give multi-column text in Internet Explorer.

Technorati : css, css3, javascript