To flow content into serveral columns, two new CSS properties are proposed.
The column-width property sets the ideal column width of an element. If the column width is a length value, the number of columns will increase as the canvas is enlarged:
P { column-width: 20em } /* relative to the font size */
To indicate a fixed number of columns, a percentage value can be used:
P { column-width: 25% } /* 4 columns */
All values, length or percentage, should only be used to determine the number of columns. Once found, the available space should be split into columns with equal widths and the same space between them (see the 'gutter' property).
Subsequent block-level elements with the same 'column-width' value and a 'width' value of 'auto' form a region where all the content is flowed in to the same set of columns. Within the region, columns have approximately the same height and are filled roughly to the same degree.
The 'gutter' property describes the space between columns. See the 'column-width' property for a description of how multiple columns are specified in CSS.
<STYLE>
P {
column-width: 20em;
width: auto;
gutter: 3em;
}
H1 { column-width: 100%; }
</STYLE>
<BODY>
<H1>THIS IS THE HEADLINE WHICH IS QUITE LONG</H1>
<P>This is the first paragraph. The first paragraph comes
first, before the second.
<P>After the first paragraph comes the second paragraph which
you are reading now.
<P>The third paragraph is the last paragraph. Not much more to
say about that.
</BODY>
Since the three P elements have the same 'column-width' value and a 'width' value of 'auto', they form a region. Since the value of 'column-width' is specified in a lenght unit, the number of columns will depend on the available width, i.e. the width of the BODY element. A User Agent may use two columns when started:
THIS IS THE HEADLINE WHICH GOES ON TOP
This is the first graph which you
paragraph. The are reading now.
first paragraph
comes first, be- The third para-
fore the second. graph is the last
paragraph. Not
After the first much more to say
paragraph comes about that.
the second para-
If the canvas is enlarged, three columns may be used instead:
THIS IS THE HEADLINE WHICH IS QUITE LONG This is the first After the first The third para- paragraph. The paragraph comes graph is the last first paragraph the second para- paragraph. Not comes first, before graph which you much more to say the second. are reading now. about that.
Margin, border and padding values should be honored within the columns. If the columns are not wide enough to display content properly, the UA may decide to reduce the number of columns.