The ever more delayed CSS 3 specification has a Multi-column layout module. Unsurprisingly, this module specifies ways and means of creating multi-column texts. This page contains a few tests of the column declarations.

The current Mozilla implementation uses the special -moz- prefix, while the Safari implementation uses the special -webkit- prefix. In this page I used both this prefix and the official rules, so that any declaration looks like this:

Thus I accomodate both Mozilla and (as yet unreleased) other browsers that support the W3C declarations.

When viewing the test cases it's very useful to increase and decrease the font size. That way you'll quickly see how multicolumn boxes work.

Test 1: column count

There are two ways of defining columns: defining a column-count (how many columns do I need?), or a column-width (how wide should each column be?). This first test looks at column-count.

I specify column-count: 3. Unsurprisingly, the browser reacts by dividing the test <div> into three columns of equal width. I also specify column-gap: 20px, which serves as a sort of padding between the columns, greatly increasing legibility.

Note that the columns become as high as they need to be. When the font size increases, the height also increases.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla at turpis eget nibh ultricies dignissim. Duis luctus euismod turpis. Mauris augue. Aliquam facilisis semper elit. Pellentesque semper hendrerit arcu. Phasellus eleifend commodo justo. Aliquam orci urna, imperdiet sit amet, posuere in, lobortis et, risus. Integer interdum nonummy erat. Nullam tellus. Sed accumsan. Vestibulum orci ipsum, eleifend vitae, mollis vel, mollis sed, purus. Suspendisse mollis elit eu magna. Morbi egestas. Nunc leo ipsum, blandit ac, viverra quis, porttitor quis, dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus scelerisque ipsum ut justo. Pellentesque et ligula eu massa sagittis rutrum. In urna nibh, eleifend vel, suscipit ut, sagittis id, nunc.

Nam ut sapien sed pede pulvinar rutrum. Nunc eu elit sed augue aliquet tincidunt. Morbi rutrum. Vestibulum dui turpis, lobortis quis, euismod sed, consectetuer sit amet, nunc. Nam mi. Fusce at nisl eu tortor bibendum eleifend. Sed ac metus. Phasellus nec elit. Morbi tortor nulla, tristique a, adipiscing at, consectetuer et, nisi. Nunc vel sapien sed risus hendrerit egestas. Vivamus turpis arcu, placerat eu, congue vel, commodo ut, nisl.

Test 2: column width

When I specify column-width: 150px, unsurprisingly all columns become 150 pixels wide. Thereafter the browser calculates how many columns of this width can fit into the parent box, and creates these columns.

Test 3: column rules

A column-rule serves as a kind of border between the columns. Note that these rules have the same properties as normal borders: width, style and color.

Test 4: column-span

By using column-span you can decree that a certain element inside the multicolumn box, a header for instance, spans more than one column. The value all means all columns.

The header of the columns

Test 5: height + column-width

Mozilla has added a non-standard bit: the interaction of multicolumn boxes and height. Basically a height is always honoured, so that the box is divided into as many columns as necessary, given the correct height, and only then is the content distributed over the various columns. If it's necessary to add more columns (as it is when you increase the font size a few steps), the browser generates more columns.

Test 6: height + column-count

height is more important than column-count: if the text doesn't fit the available columns because of height restrictions, the browser adds another column. Increase the text size a few steps to see this in action.