HTML and CSS Reference
In-Depth Information
Turning that into two columns of
text is straightforward:
body {
column-count: 2;
}
The text flows naturally into two
columns with no markup changes,
as you can see in the screenshot.
An alternative approach is to spec-
ify a column width:
body {
column-width: 260px;
}
With a window 640 pixels wide, as
in this example, and taking into
account page margins and padding,
this has a result that's identical to
the previous rule.
The difference between the two becomes obvious if the browser win-
dow is wider. Here are the same two pages at 1024-pixel width.
column-count: 2
at 1024px width
column-width: 260px
at 1024px width
Note that none of the columns shown is exactly 260 pixels wide.
The columns will adjust their width so they use the entire
horizontal space available. If you want columns of an exact width,
you should put them in an appropriately sized container element.
