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.
Search WWH ::

Custom Search