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

Table 18-1. Properties for Setting the Width and Number of Columns

Property Initial Value Description

column-width auto Sets the optimal column width. The actual width might be wider to fill

available space, or narrower if insufficient space is available. The value
must be a length greater than zero.

column-count auto Specifies the optimal number of columns. If column-width is also set,

column-count specifies the maximum number of columns. The value
must be an integer greater than zero.

columns auto auto Shorthand for column-width and column-count . The values can be in

either order. If only one value is given, the other defaults to auto .

Setting Only Width
To demonstrate what happens when you create a multi-column element by specifying the width of the columns,
column-width.html contains a <div> with the ID columns . The <div> is 1000px wide, and it has a 2px black border
all round. The column-width property is set to 200px like this:

#columns {
width: 1000px;
margin: 0 auto;
border: 2px solid #000;
column-width: 200px;
}

Because 1000 ÷ 200 = 5, you might expect there to be five columns, but as Figure 18-4 shows, there are only

four.

Figure 18-4. The browser adjusts the number of columns to take account of the gap

Because there's a default gap of approximately 1em between each column, there isn't sufficient space to
create five columns each 200px wide. So, browsers automatically increase the width of the column boxes to fill
the available space. In a couple of browsers that I tested, the actual width was 238px . Browsers reduce the width
of the column box only when there isn't enough room for even one column of the specified width.
Another point to notice about Figure 18-4 is that the text in the first and last columns goes right to the border.
To move the content away from the edge of the multi-column element, add some padding to the element.