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.
column-width
column-count
columns (This is shorthand that can set either or both ‘width’ and ‘count’)
column-gap
column-rule
column-rule-width
column-rule-style
column-rule-color
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
-moz-column-height
-moz-column-width
-moz-column-count
-moz-columns
-moz-column-gap
-moz-column-rule
-moz-column-rule-width
-moz-column-rule-style
-moz-column-rule-color
-moz-column-fill
-moz-column-span
Webkit (Chrome 6, Safari 5)
10 standard properties are supported
-webkit-column-width
-webkit-column-count
-webkit-columns
-webkit-column-gap
-webkit-column-rule
-webkit-column-rule-width
-webkit-column-rule-style
-webkit-column-rule-color
-webkit-column-fill
-webkit-column-span
Opera
Not Supported
IE
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”