CSS3 Columns Tutorial

If you ever do design work for a news outlet such as magazine or newspaper, you will need to create a multi-column layout much like what you see in the actual pages of a magazine or newspaper. With CSS2, you would typically create such a layout using the float property. This can cause inconsistencies in display if there is a difference in how the browsers support the float property or the user resizes the window.  The CSS3 column module allows you to break up your page into columns using the column properties. When fully implemented, these columns will display consistently across all browsers. At the moment you will need to use browser specific prefixes, as not all browsers support the property.

 
Column Count

The column-count property specifies the number of columns the element is to be divided into.

Example:

div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3
}

Here is what it looks like in the browser.

 
Column Gap

The column-gap property allows you to control the size of the space between the columns.

Example:

div
{
-moz-column-gap:44px; /* Firefox */
-webkit-column-gap:44px; /* Safari and Chrome */
column-gap:44px;
}

Here is what it looks like in the browser.

 
Column Rule Color

The column-rule-color property allows you set the color of the rule separating the columns.

Example:

div
{
-moz-column-rule-color:#ff0000; /* Firefox */
-webkit-column-rule-color:#ff0000; /* Safari and Chrome */
column-rule-color:#ff0000;
}

 
Column Rule Style

The column-rule-style property specifies the style of the rule between the columns.

Example:

div
{
-moz-column-rule-style:dotted; /* Firefox */
-webkit-column-rule-style:dotted; /* Safari and Chrome */
column-rule-style:dotted;
}

 
Column Rule Width

The column-rule-width property allows you set the width of the rule that separates the columns.

Example:

div
{
-moz-column-rule-width:2px; /* Firefox */
-webkit-column-rule-width:2px; /* Safari and Chrome */
column-rule-width:2px;
}

 
Column Rule

The column-rule property is a shorthand property that combines all the individual column rule properties.

Example:

div
{
-moz-column-rule:2px dotted #ff0000; /* Firefox */
-webkit-column-rule:2px dotted #ff0000; /* Safari and Chrome */
column-rule:2px dotted #ff0000;
}

Here is what it looks like in the browser.

 
Column Span

The column-span property is typically used to control the layout of headlines over columns. It has two values 1 or all. It is easier to understand how this property works by looking at an example. Let us add a headline to our earlier example.

h2
{
-webkit-column-span:all; /* Chrome */
column-span:all;
}

Here is what it looks like when the property is set to all. The headline will span across all the columns.

 
Here is what it is looks like when the property is set to 1. The headline will be confined to one column.

 
Column Width

The column-width property allows you to specify the width of the individual columns.

Example:

div
{
-webkit-column-width:100px; /* Safari and Chrome */
column-width:100px;
}

 
Columns

The columns property is a shorthand property that allows you to set both the column width and column count.

Example:

div
{
-webkit-columns:100px 3; /* Safari and Chrome */
columns:100px 3;
}