HTML and CSS Reference
In-Depth Information
Chapter 18
Using CSS3 Multi-Column Layout
This chapter is concerned with columns that automatically flow from one to the next like in newspapers or
Candidate Recommendation status in December 2009, so is considered fairly stable. However, browser
implementation has been slower than many other parts of CSS3. Flowing content into multiple columns involves
only a small number of properties, which are easy to use.
In this chapter, you'll learn how to:
•
Set the number and width of columns
•
Control the gap between columns
•
Separate columns with rules (vertical lines)
•
Span elements across multiple columns
•
Deal with oversize elements
Browser Support for Multi-Column Layout
At the time of this writing, the only browsers that have implemented the multi-column specification without the
need for browser-specific properties are Opera 11.1+ and IE 10.
Firefox and WebKit-based browsers still need the prefixed properties, and haven't fully implemented the
prefixed properties are still required. You should also test your pages carefully in your target browsers to make
sure multi-column elements are rendered correctly because browser support is still evolving.
There is no support in IE 9 or earlier.
■
For brevity, the code examples in this chapter use only the standard properties. The source files include
the
-moz-
and
-webkit-
browser specific prefixes for Firefox and WebKit-based browsers.
Note
How Columns Are Laid Out
The CSS Multi-column Layout module introduces a new type of container called a
column box
, which is different
from the box model described in Chapter 6. All column boxes inside a multi-column element are the same width
and height. There's a uniform gap between each column; and if there's a vertical rule between columns, all rules
