One of the new features of CSS3 will be the ability to produce multi-column layouts simply. It is currently quite difficult to produce a multi-column text layout that is both good looking and flexible. Once browsers support this feature that should be a thing of the past. The main benefit of this multi-column layout is the improved readability of pages. Long lines of text are difficult to read, breaking the line up into two or more columns (as is done in news papers) greatly improves the readability.

As far as I am aware the only browser to support this new feature at all is Firefox 1.5.0 (and I assume the corresponding Mozilla release) and even then not with the probable eventual CSS names and not with all the attributes. What has been implemented is enough to provide a good feel for what's to come.

There are two properties that control the painting of columns in Firefox: -moz-column-count and -moz-column-width. As you will have noticed both properties carry the standard -moz prefix to indicate that they are Mozilla only properties. The first property determines the number of columns the second the minimum width of the columns. If only -moz-column-count property is set then the browser will divide up the available space evenly to provide the required number of columns. If only the -moz-column-width property is set the browser will attempt to paint as many columns as possible with at least that width. If the pages width is not an exact multiple of the column width then then the excess with be divided amongst the other columns as can be seen in this example (try making the scree wider).

If both properties are specified the behaviour is a little more complex but predictable. You will never get more than -moz-column-count number of columns but you might get less. Any columns painted will never be smaller than -moz-column-width.

The CSS3 specification dictates that the heights of the columns should be balanced leaving the minimum of white space at the end of the last column. This is often the behaviour one would want when using a text-in-columns but there can be times when it is useful to specify the height of the column. Firefox therefore extends the CSS3 specification and will wrap columns at a given height if the height property is set on the containing div. If there is sufficient room for the text this can provide a very nice look. As can be seen in the example, however, if there isn't enough room the text flows off the right.

If it also possible to provide padding between the columns using the -moz-column-gap property. If one is using column layout of text this is really a must as two columns of text butted up next to each other can be difficult to read. A good spacing seems to be around 1 or 2 em.

Since -moz properties aren't understood by non-Mozilla browsers they are safe to use in cross-browser sites (this site uses the Mozilla extension to provide rounded corners on the boxes for instance) so there is little to stop the adoption of this excellent feature now.