Cook Computing

Multi-Column Layout

May 1, 2006 Written by Charles Cook

If you're reading this in a fairly recent Gecko-based browser, such as Firefox, you'll see that I'm experimenting with using two columns of text. This is achieved by using the experimental implementation of the CSS3 multi-column layout proposal. For the time being I'm using the following CSS class to display columns:


.columns 
{
    -moz-column-count: 2;
    -moz-column-gap: 2em;
}

For more information see Gecko 1.8 For Web Developers: Columns by Mozilla hacker Robert O'Callahan from just over a year ago.

One problem is that multiple columns are not great for reading if the column height is greater than the height of the viewport, i.e. when you read to the bottom of a column you then have to scroll back to the top of the next column. In the case of the Mozilla implementation, if the CSS height property is set on a multi-column block, increasing the amount of text will cause extra columns to be created, overflowing if necessary which may cause problems.