CSS Text Multi-Columns

Columns are lovely things. They allow you to read text easier, make chunks of text look nicer and now with the power and beauty of CSS3 you can make columns dynamically – yey! No more table columns and splitting of paragraphs to achieve the same effect.

This is supported by Chrome & Safari (with -webkit- prefix), Firefox (with -moz- prefix) and Opera.

Update: A jQuery fall-back, called Columnizer, is available with support for IE.

Update 2: Column support will be implemented in IE10

CSS Syntax

p
{
	column-count: 2;
	column-gap: 30px;
}

Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut lorem erat. Suspendisse blandit pellentesque mattis. Donec condimentum venenatis quam at vulputate. Suspendisse potenti. Quisque pretium enim nec lectus sodales molestie. Suspendisse sollicitudin justo diam, in bibendum arcu. Vestibulum a nunc elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec et nulla augue.

.columndemo
{
	-moz-column-count: 2;
	-moz-column-gap: 30px;
	-moz-column-rule: 2px solid #36F;
	-webkit-column-count: 2;
	-webkit-column-gap: 30px;
	-webkit-column-rule: 2px solid #36F;
	column-count: 2;
	column-gap: 30px;
	column-rule: 2px solid #36F;

	text-align: justify;
}

This is all well and good if you’re using an adequate web browser, but what if you’re not? Shouldn’t you get a similar user experience which ever browser you’re using? Well, like with most CSS3 functionality, it is possible to run a JavaScript fall-back. More information on this can be found here.