CSS3 Series: Multiple Columns

Even though this wonderful feature has been around for five years, it has yet to be implemented consistently across the major browsers. Hopefully, this will change soon.
If you know a reason why this is so, please leave a comment. Thanks.

The specification for CSS Multi-column Layout has 10 properties for CSS Multiple Columns.
They are pretty self explanatory except for maybe ‘rule’ which in this context means a vertical divider between the columns that behaves like a CSS border.

columns (This is shorthand that can set either or both ‘width’ and ‘count’)
column-fill (Balances columns height)

column-span (Allows for titles or headings to span across multiple or all columns)

Browser Support

Let’s look at the current implementations (as of August, 2010)

Mozilla (Firefox 3.6)
10 standard properties are supported plus an extra one created by Mozilla


Webkit (Chrome 6, Safari 5)

10 standard properties are supported

Not Supported

Not Supported

Webkit and Mozilla Render differently

To further complicate the use of CSS3 multiple columns, even simple examples are rendered differently by Webkit and Mozilla.

If you set both column-width and column-count, visitors with a Webkit browser see a very different result than visitors with a Mozilla browser.

For example, here are images of the following code in Firefox 3.6 and Chrome 6

-moz-column-count: 3;
-moz-column-width: 45px;
-webkit-column-count: 3;
-webkit-column-width: 45px;

While Chrome limits the column width to what it is set at (45px) Firefox limits the column width based on the column number. If you allow Firefox to automatically set the column number, it will then limit the column width to what it is set at (45px).

It may be quite awhile before the average webmaster uses CSS3 multiple columns.

Some sites for further reading.
W3C Specification http://www.w3.org/TR/css3-multicol/
Demo page with source code. http://www.quirksmode.org/css/multicolumn.html
Mozilla Dev Page https://developer.mozilla.org/en/CSS3_Columns

One Reply to “CSS3 Series: Multiple Columns”

Leave a Reply

Your email address will not be published. Required fields are marked *