HTML and CSS Reference
In-Depth Information
Designing Columnar Layouts with CSS3
• To specify the number of columns in the layout, use
column-count:
number
;
where
number
is the number of columns in the layout.
• To specify the width of the columns, use
column-width:
width
;
where
width
is the width of the columns expressed in one of the CSS units of measure
or as a percentage of the width of the element.
• To set the size of the gap between columns, use
column-gap:
width
;
where
width
is the width of the gap.
• To add a border between the columns, use
column-rule:
border
;
where
border
is the format of the border.
• To specify the width and number of columns in a single style property, use
columns:
width count
;
where
width
is the width of each column and
count
is the total number of columns in
the layout.
• For specific browsers, add the
-moz-
vendor prefix for Firefox and the
-webkit-
prefix for Safari and Chrome to these style properties.
Kyle suggests that you use browser extensions and the CSS3 column style properties to
display the introductory paragraph in a two-column layout with a gap width of 20 pixels
and a purple divider. Add this style rule to the
tables.css
style sheet.
To display the introductory paragraph in two columns:
◗
1.
Return to the
tables.css
file in your text editor and add the following style rule to
the bottom of the file (see Figure 5-51):
/* Two column layout for the introductory paragraph */
section#main p {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
column-gap: 20px;
-moz-column-rule: 2px solid rgb(153, 0, 153);
-webkit-column-rule: 2px solid rgb(153, 0, 153);
column-rule: 2px solid rgb(153, 0, 153);
}
