Multi-column layout
Internet Explorer 10, as well as Windows apps using JavaScript in Windows 8, introduces support for the CSS Multi-column Layout Module. As of this writing, the Multi-column Layout Module is a World Wide Web Consortium (W3C) Candidate Recommendation. Multi-column layout enables content to be flowed into multiple columns, which retain a gap and an optional rule between them. It also makes it possible to vary the number of columns based on the size of the browser window.
A multi-column element is defined by the W3C as an element whose column-width or column-count property is not set to "auto" and therefore acts as a container for multi-column layout. Multi-column layout introduces the column box, which is defined as a new type of container between the content box and the content. Column boxes contain rows, which are ordered in the direction of the multi-column element. Every column box has a column height and a column width. Adjacent column boxes are separated by a column gap, which can optionally contain a column rule.
Specifying column width and count
You must, at the very least, specify a width for columns within a multi-column element. Internet Explorer 10 will display as many columns as it can, no smaller in width than the value you specify, in the browser window. To specify column width, use the following property:
| Property | Description |
|---|---|
Specifies the optimal width of the columns in a multi-column element. The possible values for the property are as follows:
|
For instance, the following selector has added the column-width property and set it to 200 pixels. This means Internet Explorer 10 will fill the browser window with as many columns that have a width of 200 pixels or more.
<style type="text/css">
#multicol1 {
column-width: 200px;
}
</style>
You can view this selector applied to a large block of text. (Internet Explorer 10 or a browser compatible with unprefixed Cascading Style Sheets, Level 3 (CSS3) multi-column properties is required for this page to render correctly.)
You can also specify how many columns a multi-column element should have. To specify column count, use the following property:
| Property | Description |
|---|---|
Specifies the optimal number of columns in a multi-column element. The possible values for the property are:
|
For instance, the following selector has added the column-count property and set it to "2". This means that Internet Explorer 10 will fill the browser window with exactly two columns.
<style type="text/css">
#multicol1 {
column-count: 2;
}
</style>
You can view this selector applied to a large block of text. (Internet Explorer 10 or a browser compatible with unprefixed CSS3 multi-column properties is required for this page to render correctly.)
Column width and count can also be expressed by using the following shorthand property:
| Property | Description |
|---|---|
A shorthand value that specifies values for the column-width and column-count properties of a multi-column element. |
The syntax for this property is as follows:
columns: <column-width> <column-count>;
The following syntax is also valid:
columns: <column-count> <column-width>;
If only an integer is specified, column-width is set to auto and column-count is set to the integer. If only a length value is specified, column-width is set to the length value and column-count is set to auto. If only auto is specified, both column-width and column-count are set to auto
For instance, the following selector has added the columns property and has set it equal to "auto 12em". This means that the multi-column element will have a column-width of 12 ems and a column-count of auto.
<style type="text/css">
#multicol3 {
columns: auto 12em;
}
</style>
You can view this selector applied to a large block of text. (Internet Explorer 10 or a browser compatible with unprefixed CSS3 multi-column properties is required for this page to render correctly.)
Specifying column gaps and rules
Column gaps and column rules are placed between the columns of a multi-column element, along its entire length. Column gaps create space between columns to facilitate reading. A column rule is drawn in the middle of a column gap, and is only drawn between columns that both have content.
The following properties specify column gaps and rules:
| Property | Description |
|---|---|
Specifies the width of the gap between columns in a multi-column element. The possible values for this property are:
|
|
Specifies the color for all column rules in a multi-column element. This property can be set to any supported color value. |
|
Specifies the style for all column rules in a multi-column element. This property accepts the same values as the border-style property. |
|
Specifies the width of all column rules in a multi-column element. This property accepts the same values as the border-width property. |
|
A shorthand value that specifies values for the column-rule-width, column-rule-style, and column-rule-color properties of a multi-column element. The syntax for this property is as follows: column-rule: <column-rule-width> <column-rule-style> <column-rule-color>; |
Following is an example of several of these properties within a selector:
<style type="text/css">
#multicol4 {
columns: auto 12em;
column-gap: 1em;
column-rule-width: 1em;
column-rule-style: solid;
column-rule-color: black;
}
</style>
In this case, both the column gap and the column rule have been specified as 1 em in width. The column rule is solid black. You can view this selector applied to a large block of text. (Internet Explorer 10 or a browser compatible with unprefixed CSS3 multi-column properties is required for this page to render correctly.)
Be aware that the previous example could also be expressed as follows, using the column-rule shorthand property:
<style type="text/css">
#multicol4 {
columns: auto 12em;
column-gap: 1em;
column-rule: 1em solid black;
}
</style>
Specifying column breaks
You can specify when content should break between columns. This prevents content from breaking in the middle of paragraphs, sections, and so on. The concept of column breaks is similar to page-breaks when printing, and in fact can be controlled by Cascading Style Sheets (CSS) in much the same way.
The following properties control column breaks:
| Property | Description |
|---|---|
Specifies the column-break behavior that precedes a content block in a multi-column element. This property accepts the same values as the page-break-before property, plus the following values:
|
|
Specifies the column-break behavior that follows a content block in a multi-column element. This property accepts the same values as the page-break-after property, plus the following values:
|
|
Specifies the column-break behavior that occurs within a content block in a multi-column element. This property accepts the same values as the page-break-inside property, plus the following values:
|
Following is an example of several of these properties within a selector:
<style type="text/css">
#multicol5 {
columns: auto 12em;
column-gap: 1em;
column-rule-width: 1px;
column-rule-style: solid;
column-rule-color: black;
}
#multicol5 h2 {
column-span: all;
background: lightgreen;
}
#multicol5 blockquote {
break-inside: avoid-column;
}
</style>
In this example, all h2 elements are preceded by a column break as well as a 2-em margin, and no column breaks can appear within a blockquote element. You can view these selectors applied to a large block of text. (Internet Explorer 10 or a browser compatible with unprefixed CSS3 multi-column properties is required for this page to render correctly.)
Specifying column span
You can specify a content block to span across several columns. An element that has been spanned across several columns effectively acts as a break between the content before and the content after the span. The following property controls column spanning:
| Property | Description |
|---|---|
Specifies the number of columns that a content block spans in a multi-column element. The possible values for this property are:
|
Following is an example of this property within a selector:
<style type="text/css">
#multicol6 {
columns: auto 12em;
column-gap: 1em;
column-rule-width: 1px;
column-rule-style: solid;
column-rule-color: black;
}
#multicol6 h2 {
column-span: all;
background: lightgreen;
}
</style>
In this case, all h2 elements span all columns, and have a light-green background.
You can view these selectors applied to a large block of text. (Internet Explorer 10 or a browser compatible with unprefixed CSS3 multi-column properties is required for this page to render correctly.)
Balancing column content
You can specify whether to balance the content of your columns—that is, minimize the variation in column length. Otherwise, columns are filled sequentially and will have different lengths.
The following property controls column filling:
| Property | Description |
|---|---|
Specifies how the column lengths in a multi-column element are affected by the content flow. The possible values for this property are the following keywords:
Column balancing is also dependent on the values of the orphans and widows properties, if set. |
Following is an example of this property within a selector:
<style type="text/css">
#multicol7 {
columns: auto 12em;
column-gap: 1em;
column-rule-width: 1px;
column-rule-style: solid;
column-rule-color: black;
column-fill: balance;
}
</style>
In this case, the column-fill property has been set to balance, which means that column lengths are as balanced as possible.
You can view these selectors applied to a large block of text. (Internet Explorer 10 or a browser compatible with unprefixed CSS3 multi-column properties is required for this page to render correctly.)
API Reference
Samples and tutorials
CSS Multi-column layout sample
Internet Explorer Test Drive demos
IEBlog posts
IE10 Platform Preview and CSS Features for Adaptive Layouts