I had no idea CSS3 did this!

For any of you who mess with CSS, you know that building a mutli-column layout can be tricky, especially when you’re doing it for sites that run on a CMS of some sort. But a little CSS3 I just discovered makes things quite a bit easier…

.content {
-moz-column-count: 3;
-moz-column-gap: 10px;
-moz-column-rule: none;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-rule: none;
column-count: 3;
column-gap: 10px;
column-rule: none;
}

So, assuming you’ve got a div with the class “content”, and assuming you’ve got a whole mess of text inside of that div, the above code will automatically arrange that text in to 3 multiple columns, with a gap (i.e. margin) of 10px, with no rule (i.e. line, or, more CSS-ly, border).

That’s it!

It won’t solve all of your multiple column layout woes, but, it will definitely work for quite a few different situations. And it’s so easy!

A few quick notes… first, this won’t work quite yet in Internet Explorer (surprise). So for now, you’ll either have to use this in a progressively enhanced way, or, simply ignore those less fortunate IE users altogether. This is why the rules are duplicated with the “-moz” and “-webkit” prefixes… “-moz” makes Firefox kick this right, “-webkit” makes Chrome/Safari bust it correctly. One day, though, CSS3 will actually be the standard, and then the last 3 lines will work everywhere. Just write things like they are above and ensure you won’t have to go updating your code later on.