Koodoz Design

One of the coolest features of CSS3 is the ability to create newspaper-like columns on your layouts without any extra markup. We always find ourselves “cheating”, using things like <div id="column-one"> which is not very good, so this property would save us a lot of time and unnecessary code.

CSS3 solves all this with the use of some really cool properties: column-width, column-gap and column-rule. I guess they’re pretty self explanatory, except for column-rule which basically behaves like a border in between columns, so it can be treated like one, using width, style, etc. If you need more details, you can go to the source.

The problem? you guessed it! It’s still not supported by some browsers, namely IE and Opera (need to check IE8 and Chrome, though). Anyway, for this blog post I decided to start testing cross-browser solutions for the problem and this is what I’ve come up with so far.

First, we use the property for the browsers that support it, so if we have something like:

<div id="content">
<p>The quick brown fox jumped over the lazy dog</p>
…
<p>And they lived happily everafter</p>
</div>

we then style it like this:

div#content {
	-moz-column-count: 4;
	-webkit-column-count: 4;
}

Notice the prefixes -moz and -webkit. The reason for their presence lies in the fact that amazingly enough, the specification is still a draft (it was originally suggested in 2004!), so we need those. They’re obviously not 100% standard but in this case I would favour common sense as opposed to standards compliance. The styles themselves can get immensely fancier, using the column-gap and column-rule properties, but let’s keep it simple for the purposes of this post.

If you use a decent browser and look at that code, you should see something like this:

Everyone else should see the style-less rendering:

Taking care of all other browsers

So, to make sure no one else misses out on the fun, we can use a little jQuery. There are many jQuery plugins to deal with multi-columns, but Systemantics’ columnize plugin was the best-suited one I could find, so cheers to them!

We don’t want to apply the columnize styles to the browsers that support column-width, so we need to serve the javascript only to those that absolutely need it. You can do so by using jQuery’s browser detection, but I would suggest using get_browser() instead. It gives you much more control:

<?php if ( ($browser != 'Firefox') && ($browser != 'Safari') ) { ?>	
	// enter columnize code here
<?php } ?>

Using columnize is pretty straightforward. You invoke jquery and the plugin, and then simply do something like:

$("#content").columnize({columns: 4});

By default, columnize adds the class .column to each of the generated columns, so be sure to style it properly. The overall width of each element should be equal to the width of the parent element, divided by the number of columns, so for instance, if your parent element is 1200px wide and you have four columns, the overall width of each .column element should be 300px. Columnize has tons of other options as well, so be sure to check them out.

You can look at the demonstration here. As usual, comments and questions are always welcome. Thanks for reading!