Multi column text with CSS

One of the most overdue techniques for web design is probably a convient way to display text in multiple columns. So far this had to be achieved the hard way by splitting text in separate containers, with scripting or some other complicated solution. CSS3 finally introduces an easy way to do it, and the latest browsers already support it.

The specification is still not final, but it’s rather unlikely anything will change, so I wouldn’t mind using it on my own sites.

How it works

Instead of ‘physically’ separating text into different HTML elements, text is kept in one single container or element. The CSS is directly applied to the container.

Depending on whether or not your browser supports it, the following paragraph will be displayed in 2 columns:

Doomsday device? Ah, now the ball’s in Farnsworth’s court! No argument here. You guys realize you live in a sewer, right? I don’t want to be rescued. Pansy. Now, now. Perfectly symmetrical violence never solved anything. We don’t have a brig. Oh, but you can. But you may have to metaphorically make a deal with the devil. And by “devil”, I mean Robot Devil. And by “metaphorically”, I mean get your coat. I love this planet! I’ve got wealth, fame, and access to the depths of sleaze that those things bring.

Source: Fillerama

The following styles have been applied to it:

p.multi-column {
	-moz-column-count: 2;
	-moz-column-gap: 20px;
	-o-column-count: 2;
	-o-column-gap: 20px;
	-webkit-column-count: 2;
	-webkit-column-gap: 20px;
	column-count: 2;
	column-gap: 20px;
}

Please check the specification document linked above for additional attributes and options.

Interesting to know is, it also works very well on lists. Often dividing lists into equal columns turns out to be difficult if some list items occupy more than one line. By dividing the list half/half it often still results in uneven columns. Not anymore with CSS3.