HTML and CSS Reference
In-Depth Information
Finally, you can extend content across columns using the
column-span
property
column-span:
span
;
where
span
is either
1
(to prevent spanning) or
all
(to enable spanning across all of the
columns). In the following style rule, the contents of the
section
element are displayed
in three columns but the
h1
heading within that section spans across the three columns:
section {
column-count: 3;
}
section h1 {
column-span: all;
}
Currently, the
column-span
property is not supported by any browser.
The
width
and
count
column styles can be combined into the shorthand property
columns:
width
count
;
where
width
is the width of each column and
count
is the number of columns in the
layout. For example, the style rule
section {
columns: 250px 3;
}
creates a three-column layout for the
section
element with each column 250 pixels wide.
Browser Extensions to Columns
The column styles were fi rst introduced in 2001 as part of the working draft of the
proposed CSS3 specifi cations. However, they were not immediately adopted by the
browser market. At the time of this writing, the only browsers that support column styles
are Firefox, Google Chrome, and Safari, and all three do so through the use of browser
extensions. Thus, to create a three-column layout for the paragraphs on your Web site
that would be accepted by these browsers, you would use progressive enhancement with
the following style rule:
p {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
The browser extensions for the
column-width
and
column-rule
properties are
expressed in the same way using the
-moz-
or
-webkit-
prefi xes. Other column style
properties have not been adopted by the market yet, and currently Internet Explorer and
Opera do not support column styles at all. If you have to support those browsers, you
should not design a layout that relies on multiple columns in order to be readable.
