HTML and CSS Reference
In-Depth Information
Examples
.two-column {-moz-column-count: 2; -webkit-column-count: 2; column-count: 2;
-moz-column-gap: 100px; -webkit-column-gap: 100px;
column-gap: 100px;
-moz-column-rule-style: solid;
-webkit-column-rule-style: solid;
column-rule-style: solid;}
.three-column {-moz-column-count: 3; -webkit-column-count: 3; column-count: 3;
-moz-column-gap: 2em; -webkit-column-gap: 2em; column-gap: 2em;
-moz-column-rule-style: dashed;
-webkit-column-rule-style: dashed;
column-rule-style: dashed;}
Compatibility
CSS3
Chrome 2+, Firefox 3.5+, Safari 3+
Note
• Firefox browsers support this property as
-moz-column-rule-style
and WebKit-
based browsers like Chrome and Safari support it as
-webkit-column-rule-style
.
column-rule-width
This property defines the width of a rule between columns in a multicolumn text flow.
Syntax
column-rule-width:
non-negative length
| medium | thick | thin | inherit
where the width values here match standard border values, with the default being
medium
.
Examples
.two-column {-moz-column-count: 2; -webkit-column-count: 2; column-count: 2;
-moz-column-gap: 100px; -webkit-column-gap: 100px;
column-gap: 100px;
-moz-column-rule-style: solid;
-webkit-column-rule-style: solid;
column-rule-style: solid;
-moz-column-rule-width: 25px;
-webkit-column-rule-width: 25px;
column-rule-width: 25px;}
.three-column {-moz-column-count: 3; -webkit-column-count: 3; column-count: 3;
-moz-column-gap: 2em; -webkit-column-gap: 2em; column-gap: 2em;
-moz-column-rule-style: dashed;
-webkit-column-rule-style: dashed;
column-rule-style: dashed;
-moz-column-rule-width: thin;
-webkit-column-rule-width: thin;
column-rule-width: thin;}
Compatibility
CSS3
Chrome 2+, Firefox 3.5+, Safari 3+
