CSS3 Columns

Column layouts are a new addition to CSS – part of the CSS3 specification. Instead of contriving complex layouts to replicate columns that never flow correctly, you can now specify how many columns to divide an element into.

We’ll need some HTML to apply this to first:

	<div class="columns">
		<h1>Multiple Columns using CSS3</h1>
		<p>The markup for this part of the page consists of one &lt;div&gt; with several &lt;p&gt;ps within it</p>
		<p>The paragraphs are simply for semantic deliniation of the text and form no part of the column layout. The layout is constructed on the single div wrapping the paragraphs.</p>
		<p>This is made possible by using the "column-count", "column-gap" and "column-rule" properties in CSS3. In this layout we have a "column-count" of 5, a "column-gap" of 19 pixels and a "column-rule" (following the same syntax as CSS borders) of a 1 pixel dotted line in grey.</p>
		<p>Unfortunately, this only works in mozilla and webkit based browsers at the moment. So we have to prefix the properties with "-moz-" for mozilla and "-webkit-" for webkit browsers.</p>
	</div>

There’s nothing special about this HTML – It’s just a DIV with a few paragraphs inside.

The CSS is what makes it work. There are three basic things to specify here: The number of columns, the size of the gap between the columns and the style of rule you want between the columns.

Specifying the number of columns is simple:

	column-count: 3;

As is specifying the width of the gap between columns:

	column-gap: 5px;

And setting the style of the dividing lines is just like writing a border style:

	column-rule: 1px solid #000;

However, Mozilla and Webkit are the first browsers to support this and have implemented it using their own prefixed property names. This means that your final set of styles will look like this:

	-moz-column-count: 3;
	-moz-column-gap: 19px;
	-moz-column-rule: 1px dotted #999;
	-webkit-column-count: 3;
	-webkit-column-gap: 19px;
	-webkit-column-rule: 1px dotted #999;
	column-count: 3;
	column-gap: 19px;
	column-rule: 1px dotted #999;

So adding a few other, more familiar styles we get the final rule:

	.columns {
		-moz-column-count: 3;
		-moz-column-gap: 19px;
		-moz-column-rule: 1px dotted #999;
		-webkit-column-count: 3;
		-webkit-column-gap: 19px;
		-webkit-column-rule: 1px dotted #999;
		column-count: 3;
		column-gap: 19px;
		column-rule: 1px dotted #999;

		display: block;
		border: 1px solid red;
		resize: both;
		width: 250px;
		height: 250px;
		overflow: auto;
	}

Note: The CSS3 “resize” property will allow you to pull the edge of the box and see the text reflow within your new columns.

Advertisement