The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

78 Chapter 7

Figure 7-2: Text broken across dynamically created, equally spaced columns

The algorithm that creates the columns is actually quite intelligent and

resizes the columns automatically so they better fit the parent. It uses the

150px as a minimum value, making each column wider until the total width

matches that of its parent—in this case, each column is resized to 168.5px.

Varying Distribution of Content Across Columns

By default, content that’s flowed into multiple columns will be balanced as

equally as possible across the columns, so no one column is longer than any

of the others. If the browser can’t arrange the content so there are an equal

number of lines in each column, the last column will be made shorter. This

is probably easier to show than to explain, so Figure 7-3 shows text distrib-

uted over three columns using the default layout method.

Figure 7-3: Text dynamically distributed over three columns

You can see that all three columns have the same number of lines. If

you want to change this default behavior, you can do so with the column-fill

property:

E { column-fill: keyword; }

This property has two possible keyword values: the default is balance,

which tries to make all the columns equal length, as in Figure 7-3; and

the alternative is auto, which fills columns sequentially.

The auto value takes effect only when the parent element has a fixed

height. The content is flowed into the first column to fill the height and

then into the next column until that one is filled, and so on.