HTML and CSS Reference
In-Depth Information
Note
• Firefox browsers support this property as
-moz-column-rule-width
and WebKit-
based browsers like Chrome and Safari support it as
-webkit-column-rule-width
.
column-width
This property defines the width of each column in a multicolumn text flow.
Syntax
column-width:
length
| auto
where
length
is a positive value for width between columns in any valid CSS measurement.
Examples
.two-column {-moz-column-count: 2; -webkit-column-count: 2; column-count: 2;
-moz-column-width: 350px;
-webkit-column-width: 350px;
column-width: 350px;}
.three-column {-moz-column-count: 3; -webkit-column-count: 3; column-count: 3;
-moz-column-width: 6em;
-webkit-column-width: 6em;
column-width: 6em;}
Compatibility
CSS3
Chrome 2+, Firefox 1.5+, Safari 3+
Notes
• Firefox browsers support this property as
-moz-column-width
and WebKit-based
browsers like Chrome and Safari support it as
-webkit-column-width
.
• If column widths are set too small or large for the number of columns and text
provided, the browser collapses to what makes sense to flow the text.
columns
This property is a shorthand definition of the number of columns and their widths in a
multicolumn text flow.
Syntax
columns:
column-count width
where
column-count
is a positive integer for the number of columns to flow the text into, and
width
is a positive CSS length defining the width of each column.
Examples
.two-column {-webkit-columns: 2 100px ; columns: 2 100px ;}
.three-column {-webkit-columns: 3 10em; columns: 3 10em;}
