HTML and CSS Reference
margin: 0 auto;
border: 2px solid #000;
The available width inside the columns<div> is 980px , so there's plenty of room for more than five 100px
columns. All other browsers that support multi-column layout—apart from Opera 12—interpret the specification
correctly by limiting the number of columns to five, and produce exactly the same result as shown in Figure 18-5 .
Opera displays eight narrow columns.
Using the Shorthand Property
Instead of the individual properties for the width or number of columns, you can use the shorthand columns
property to set either value or both. Because the optimal column width is specified as a length and the desired
number of columns is an integer, there's no ambiguity about the meaning of the values.
Instead of using column-width , you can use the shorthand version like this:
columns: 200px; /* Equivalent to column-width: 200px; */
Equally, you can use the shorthand property to set the number of columns like this:
columns: 5; /* Equivalent to column-count: 5; */
To set the maximum number of columns and optimal width at the same time, you can use the following
columns: 100px 5;
The values can be in either order. So, the following has exactly the same meaning:
columns: 5 100px;
■ The code for the preceding examples is in columns_1.html, columns_2.html, and columns_3.html. The
first one produces the same result as Figure 18-4 , while the other two produce the result in Figure 18-5 .
Setting the Gap and Rule Between Columns
Browsers leave a gap of approximately 1em between column boxes, but you can change this value. You can also
add a rule (vertical line) to separate them using the properties listed in Table 18-2 .