Sussex countryside

It's made my business run better! Get a 10% lifetime discount when you Sign up for FreeAgent

Multi-column layout with CSS3 (and some JavaScript)

Posted in on 13 July 2009

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 : , ,

Related Posts

Comments

  1. Mike Hayden

    Hi there, I am using your script here:

    http://www.theclassifiedsband.co.uk/band.html and the css file can be viewed here: http://www.theclassifiedsband.co.uk/style.css

    as you can see I am having two problems… 1. I cannot position my div correctly, 2. There is a paragraph indent on the first line of each column, when it is not needed.

    I am fairly new to web design, and I am at a total loss, the javascript file is way over my head.

    Thanks in advance for your response, I appreciate your time and your hard work on this script.

  2. Clive Walker (Author)

    @Mike: I checked your links in several browsers and it seems that you do have a multi-column layout. I cannot see what the problems are. However, the JavaScript in my blog post is not actually mine. The original source will probably have better documentation and help.

  3. Peter Matra

    Hi, thanks for the concise run down on multi-column CSS 3 module. Everything I have seen on the net has been rather circuitous and hard to understand. I am trying to parse the script in Joomla and I cannot get it to work properly. Have you any experience with this? Thanks
    Pete

  4. Clive Walker (Author)

    @Peter: I don’t have any direct experience with Joomla I’m afraid. However, if you are using the JavaScript method, I found that comments in my CSS style sheet caused problems. When I took these out, the script worked.

  5. Marcel

    I’m afraid your examples don’t work in IE. No columns.

  6. Clive Walker (Author)

    @Marcel: As stated above, this demo (using JavaScript) works in IE8 and IE7.

  7. Denise

    Great tutorial. I discovered that I had to put the styling for IE in an IE-only external style sheet — <!—[if gt IE 7]><link rel=“stylesheet” href=”/css/three-column.css” media=“screen” type=“text/css”/><![endif]—>
    — and the styling for other browsers embedded in the actual file. If i did it any other way, the columns would not work in one or the other browser. I am on a microsoft server and have noticed such oddities before.

Comments

Enter your comment below. Fields marked * are required. You must preview your comment first before finally posting.





Sponsors

Shopify makes it easy to open an online store by providing all the tools and help you need. Click here to try it for free!

Subscribe RSS Feed

RSS icon