Multiple Columns 77
Here’s the markup I used for the example shown in Figure 7-1 (edited
for brevity):
<div class="columns-2">
<p>A young man...</p>
</div>
<div class="columns-3">
<p>A young man...</p>
</div>
The syntax is extremely simple, and the browser takes care of distribut-
ing the content equally.
Dynamic Columns: column-width
The second method for dividing content into columns is perhaps a better
choice for flexible layouts. Instead of specifying the number of columns,
you use the column-width property to specify the width of each column, and
the browser fills the parent element with as many columns as can fit along
its width. The syntax is just as easy:
E { column-width: length; }
As with column-count, E is the parent element of the content you want
to divide into columns. But column-width differs in that it requires a length
value: either a unit of length (such as px or em) or a percentage. Here’s
an example:
div { column-width: 150px; }
This code divides the child elements of the div into columns that are
150px wide and repeats the columns along the width of the div. Let’s see
how this works, using the following style rules:
.columns {
column-width: 150px;
width: 710px;
}
Here, I have an element with a class name of columns, which is 710px
wide; the content inside it will be distributed into 150px-width columns.
You can see how this renders in Figure 7-2.
With the column-width set to 150px, the browser has created four col-
umns to fill the parent element. But all is not as it seems. Remember, the
parent element is 710px wide, and even with a 12px-gap between each col-
umn (we’ll talk about that shortly), the total width comes to only 636px, so
where is the extra white space?
