Multi-column layout in CSS

To flow content into serveral columns, one new CSS property is proposed.

columns: <column-width> [<gutter-width> [<rule-width> [<rule-height>]?]?]?]?

where the values have the following meaning:

<column-width>: This is always required and specifies the width of columns in fixed or percentage units. When given as a percentage, it is taken as a percentage of the width of the block-element to which the columns property applies. The default is for single column layout.
<gutter-width>: This is optional and specifies the width of the space between adjacent columns. It can be expressed in fixed or percentage values as per column-width. It defaults to the minimum of padding-left and padding-right for the block-element.
<rule-width>: This is optional and specifies the width of a vertical rule drawn midway between adjacent columns. The default is zero - i.e. no rule. The gutter-width should be set wider than the rule-width as the rule uses up part of the gutter space. The rule width is expressed as a fixed length value.
<rule-height>: This is optional and specifies the height of the rule in fixed or percentage units. If the rule height is less than the height of the column (100%) the rule should be vertically centered with respect to the column. The default is 100%, i.e. the same as the height of the columns.

Note that the columns property is not inherited.

The column-width property sets the ideal column width for the content of an element. If the column width is a length value, the number of columns will increase as the canvas is enlarged:

  DIV { columns: 20em }   /* relative to the font size */

To indicate a fixed number of columns, a percentage value can be used:

  DIV { columns: 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-width' property above).

The height of the columns is set by the height of the block element less any padding set for that element. In practice, it is generally a good idea to set the height of the block element using the height property when a multicolumn layout is needed. The width property can also be used to restrict the width of the multicolumn region.

The content of the block element is flowed into the columns. If the content overflows the number of columns that fit into the width of the block element, additional columns are generated as needed. The user agent then needs to provide some means for horizontally scrolling the multicolumn region.

Formatting example

<STYLE>
  DIV.columns  { 
    height: 30em
    columns: 20em 3em
  }
</STYLE>

<BODY>
  <H1>THIS IS THE HEADLINE WHICH IS QUITE LONG</H1>
  <DIV CLASS=columns>
  <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.
  </DIV>
</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:

A DIV element is used to define a multicolumn region. The height of this region is set to 30em. The width of this region is determined by the width of the parent element, i.e. the BODY element. The column width is set to 20em with a gutter width of 3em between columns. The number of columns is then determined by the available width and will be increased if the content overflows.

  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.

Content is flowed into the columns top-down, left-to-right (for English at least). If the content overflows the available column space, then additional columns will be added as needed and a scrolling or column flipping mechanism provided to enable the user to see additional material.

Note that a horizontal scrolling mechanism is preferable to a vertical scrolling mechanism, as it avoids the need to scroll down to read the bottom of one column and then up again to read the top of the next column.

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.

Dave Raggett

960701