Using CSS3 Multi-Column Layout - Beginning CSS3 - page 403

■ Note Firefox 14 doesn't support spanning multiple columns.

A column box is a containing block similar to a table cell or inline block. However, it can't act as the
containing block for an absolutely positioned or fixed positioned element. Another difference is in the way that
column boxes handle overflow.
The column box clips elements that are too wide for the column. The image in multicol_3.html is 400px
wide—more than twice the available space—so it's clipped by the rule between the second and third columns, as
shown in Figure 18-3 .

Figure 18-3. Elements that are too wide for a column are clipped in the middle of the column gap

■ Note Firefox 14 fails to clip the image.

You can't make an element span a specific number of columns. A spanning element must span all columns
like the headings in Figure 18-2 . Otherwise, elements are restricted to a single column.

■ Tip you'll learn later in this chapter how to resize an image to fit within a column.

Setting the Width and Number of Columns
You create a multi-column element by setting either the width or the number of columns you want it to contain.
You can also set both values. There's no need for accurate calculations because the browser automatically adjusts
the size of columns to achieve what it considers to be the optimal layout. Table 18-1 describes the properties that
control the width and number of columns.