HTML and CSS Reference
In-Depth Information
Adding Column Layout
Another neat feature that is new with CSS3 is the ability to format the content into columns like you would see in
a newspaper or magazine. This is done using the
column-count
attribute. You should also specify the
column-gap
attribute that defines the vertical space between the columns. As of this writing these attributes were only available
using the vendor-prefixed attributes.
Add the following rules at the end of the
style
element:
/* Setup multiple columns for the articles */
article div
{
text-align:justify;
padding:6px;
-webkit-column-count: 2;
column-count: 2;
-webkit-column-gap: 20px;
column-gap: 20px;
}
The articles should now be formatted with two columns as demonstrated in Figure
4-11
.
Figure 4-11.
Using two columns
