Columns

The CSS 3 specification has a Multi-column layout module. Unsurprisingly, this module specifies ways and means of creating multi-column texts.

Tests

Syntax

I use the following syntax, with vendor prefixes applied as necessary.

div.test {
	column-count: 2;
	column-gap: 20px;
	column-rule-color: black;
	column-rule-style: solid;
	column-rule-width: 3px;
}

div.test h4 {
	column-span: all;
}

Width and gap

Obviously, we have to define how many columns we want. This is done with the column-count property, while the column-gap property tells the browser which gutter to apply between the columns.

div.test {
	column-count: 2;
	column-gap: 20px;
}

By the way, you can also set a column-width that specifies how wide one column should be. You can also give the containing block a height; then the browser calculates how wide a column should be and how many there should be.

Rule

You can insert a rule between columns. The syntax is the same as for border: just define a column-rule-color, column-rule-style, and column-rule-width.

div.test {
	column-rule-color: black;
	column-rule-style: solid;
	column-rule-width: 3px;
}

Header

Finally, you can tell any element to span all columns. This is especially useful for headers. Just apply column-span: all and the header is supposed to span all columns.

div.test h4 {
	column-span: all;
}

Older tests

You can also take a look at my older column tests, which specify some more syntax and rules. They’re only available in -webkit- and -moz- flavours, though.