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

Ti ■ When using multi-column layout, it's a good idea to remove the top and bottom margins from paragraphs
and indent the first line with the text-indent property. otherwise, you risk ending up with a blank line at the top or
bottom of a column when it coincides with a new paragraph.
Setting Only the Number of Columns
If you prefer to know exactly how many columns you'll get, you can specify the number with the column-count
property. The styles in column-count.html specify five columns:
#columns {
width: 980px;
padding: 10px;
margin: 0 auto;
border: 2px solid #000;
column-count: 5;
}
As expected, this produces the result shown in Figure 18-5 .
Figure 18-5. Specifying the number of columns leaves the calculation about widths to the browser
Using column-count is straightforward. If there's sufficient content, you get the number of columns you
ask for. If there's only a small amount of content, the browser fills as many columns as it can, as shown earlier in
Figure 18-2 .
Setting Both Width and Number
When you set both the width and number of columns, the values are treated as the ideal width and maximum
number of columns. The styles in width_and_count.html put this to the test by setting the values for both
properties deliberately low:
#columns {
width: 980px;
padding: 10px;