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

are the same height. In these respects, multi-column layout is akin to a table in that the height of all cells in a
table row is determined by the tallest cell. The major difference, of course, is that the content flows continuously
from one column box to the next, as shown in Figure 18-1 (the code is in multicols_1.html in the ch18 folder).
Figure 18-1. The content flows from one column to the next
Most multi-column elements contain a single row of columns. However, in multicols_2.html, the headings
span across all columns, breaking the content into multiple rows, as shown in Figure 18-2 . When this happens,
the content before the spanning element—in this case, each heading—is flowed into a separate row of columns.
The first section of text in Figure 18-2 is too short to fill five columns. So, Opera forms just two. Other browsers
create four or five columns containing one line each. The next row of column boxes begins after the heading, and
the row's height is adjusted to accommodate the content before the next spanning element.
Figure 18-2. The headings split the content into multiple rows of columns