HTML and CSS Reference
In-Depth Information
CSS3 Column Styles
Multi-column layouts are created with CSS3 by setting either the number of columns or
the width of each column. To set the number of columns, you use the column-count
property
column-count: number ;
where number is the number of columns in the layout. Thus, the style rule
p {
column-count: 3;
}
lays out the content from all paragraphs in three columns of equal width. Browsers cal-
culate the width of each column so that the three columns extend across the paragraph.
For example, a paragraph that is 600 pixels wide would be broken up into three columns
of about 200 pixels each.
Alternately, you can set the width of each column by using the column-width
property
column-width: width ;
where width is the width of the column expressed in one of the CSS units of measure or
as a percentage of the width of the element. The style rule
p {
column-width: 200px;
}
creates a column layout in which each column is 200 pixels wide. The total number
of columns will be based on how many 200-pixel-wide columns can fi t into the space
reserved for the paragraph. A paragraph that is 800 pixels wide could fi t four columns.
Because the columns must be whole columns, an 850-pixel-wide paragraph would still
only fi t four columns, with an extra 50 pixels of space left over.
By default, the gap between columns is 1 em in size, but you can specify a different
gap using the column-gap property
column-gap: width ;
where width is the width of the gap. You also can separate columns using a graphic
border with the property
column-rule: border ;
where border is the format of the border following the same syntax used with the CSS
border property introduced in Tutorial 4. For example, the style
column-rule: 1px double red;
creates a 1-pixel-wide double red border. Column rules don't take up any space in the
page layout; if they are wider than the specifi ed gap, they will overlap the content of the
columns. Like the border property, you can break up the column-rule property into
the column-rule-color , column-rule-width , and column-rule-style properties to
specify the color, width, and style of the dividing line, respectively.
Search WWH ::




Custom Search