W3C

Multi-column layout in CSS

W3C Working Draft 22 June 1999

This version:
http://www.w3.org/1999/06/WD-css3-multicol-19990623
Latest version:
http://www.w3.org/TR/css3-multicol
Editor:
Håkon Wium Lie, <howcome@operasoftware.com>

Abstract

This is a proposal for multi-column layout in CSS. It is based on several older proposals and comments on older proposals. Contributors include Bert Bos, Dave Raggett, Chris Wilson, Robert Stevahn, Peter Linss, Chris Lilley and Håkon Lie.

The document describes one main proposal, and two variations of the proposal.

Status of this document

This document forms one part of a modular set of Working Drafts which will, when complete, define the next level of CSS. There is consensus in the W3C Working Group on CSS&FP that the functionality described in this document is important to improve formatting, especially printing, from the Web. There is not yet consensus on the CSS syntax for describing multicolumn layouts.

The W3C Membership and other interested parties are invited to review this public specification and report implementation experience. Please send comments to the publicly archived list www-style@w3.org (archive). We welcome experimental implementation experience reports, although the CSS Working Group will not allow early implementation to constrain its ability to make changes to this specification prior to final release.

This Working Draft may be updated, replaced, or obsoleted by other documents at any time. It is inappropriate to use W3C Working Drafts as reference material or to cite them as other than "work in progress". A list of current W3C Recommendations and other technical documents can be found at http://www.w3.org/TR.

Introduction

The goal of this draft is to describe a CSS syntax for multicolumn layout that is highly versatile yet easy to use.  This document we defines a set of of CSS properties that address the following requirements:

  1. the style sheet specifies the number of columns and lets the UA choose the dimensions
  2. the style sheet specifies a column width and lets the UA determine how many columns there is room for.
  3. the style sheet specifies both the number of columns and their widths

In all three cases, the UA determines the height of the columns based on the content which needs to be fitted. Content should be balanced between columns to minimize the heights of columns.

To describe the number and widths of columns, and the gap between columns, three new CSS properties are proposed.

The three properties above can be set using the shorthand 'columns' property.

These properties describe rules between columns:

All three properties above can be set using the shorthand 'column-rule' property.

In addition, the 'column-span' property allows elements to span several columns. For example, if a document is set to have two columns, heading elements may still want to span the full width.

The number and widths of columns

In order to lay out a muli-column element, the formatter needs to determine how many columns an element will have. First, the 'column-number' property is consulted:

'column-number'

Value: <integer> | auto | inherit
Initial: 1 [or 'auto'?]
Applies to: block-level elements
Inherited: no
Percentage values: N/A

The 'column-number' property determines the number of columns into which the content of the element will be flowed.  By specifying an integer value, a fixed number of columns is set.

An integer value sets the number of columns into which the content of the element will be flowed.

Example:

BODY { column-number: 3 }

The 'auto' value means there will be as many columns as there is room for. This number will be determined by the values of the 'column-width' and 'colum-gap' properties.

'column-width'

Value: <length> | <percentage> | auto | inherit
Initial: auto
Applies to: block-level elements
Inherited: no
Percentage values: relative to the element's content width

This property sets the width of an element's columns. The width can be specifies as a length value, a percentage value, or 'auto'.

If the sum of the column widths and the column gaps extend beyond the width of the element's content area, the 'overflow' property describes the result. Here is one example:

DIV.bodytext { 
  column-number: 3;
  column-width: 50%;
  overflow: visible;
}

In the above example, the last column will extend beyond the content area of the DIV element. Since 'overflow' has a value of 'visible', the column will still be shown, but it may overlap with the padding, border and margins of the DIV element.

The 'auto' value will hand out the available space in equal portions to all columns which has been set to 'auto'. One example:

DIV.bodytext { 
  column-number: 2;
  column-width: auto;
}

In the above example, there will be two columns with the same widths. The sum of the two columns, plus the column gap, equals the content width of the DIV element.

Length, percentage and the 'auto' value can be combined:

  DIV.article {
    column-number: 3;
    column-width: 10em 25% auto;
  }

In the above example, the first column will be 10em wide, the second will be 25% of the element's width, and the third column will be given the remaining space. If there is no remaining space, or if the remaining space is smaller than a UA-specific minimum value, there will be no third column. [or, would it be better to say that there would be a third column having the minimum width and sticking out?]

'column-gap'

Value: <length> | <percentage> | auto | normal | inherit
Initial: normal
Applies to: block-level elements
Inherited: no
Percentage values: relative to percentage values of other columns and gaps

This property defines the width of gaps between columns.

The 'normal' value is UA dependent, but a length of '1em' is suggested.

The 'auto' value will evenly allocate all horizontal space not taken up by columns between the columns. The result is that the left edge of the leftmost column aligns with the left edge of the element, and vice versa on the right side.

The column rules (see the column-rule-* properties below), if they exist, are placed in the middle of the column gaps. The width of column rules do not influenc the width of the column gaps.

'columns'

Value: <column-number> | [ <column-number>? <column-width> <column-gap>? ] | inherit
Initial: normal
Applies to: block-level elements
Inherited: no
Percentage values: relative to percentage values of other columns and gaps

This property is a shorthand for setting 'column-number', 'column-width' and 'column-gap' in one declaration.

Here are some examples:

  P { columns: 4 }      /* 4 columns, 'column-width' and 'column-gap' will be auto */
  P { columns: 25% }    /* as many columns as there is room for, each column will be 25% of the element's content width, the 'column-gap' will be 'auto' */
  P { columns: 25% 5% } /* as many columns as there is room for, between each column there will be a gap 5% of the content's element width */
  P { columns: 4 20% }       /* 4 columns with widths of 20% */
  P { columns: 4 20% 5% }

Column rules

In the middle of the gap between columns, there may be a column rule. Column rules do not affect the position of the columns, i.e. they don't "take up" any space.

column-rule-width

Value: [ <length> | <percentage> | thin | medium | thick ]
Initial: medium
Applies to: block-level elements
Inherited: no
Percentage Values: refer to parent element's width

column-rule-style

Value: [none | dotted | dashed | solid | double | groove | ridge | inset | outset ]
Initial: none
Applies to: block-level elements
Inherited: no
Percentage Values: n/a

column-rule-color

Value: <color>
Initial: the value of the 'color' property of the parent element
Applies to: block-level elements
Inherited: no
Percentage Values: n/a

The above three (3) simple properties are combined into a complex property:

column-rule

Value: <column-rule-width> || <column-rule-style> || <column-rule-color>
Initial: not defined for shorthand properties
Applies to: block-level elements
Inherited: no
Percentage Values: allowed on <column-rule-width>

Spanning several columns

'column-span'

Value: none | all | <integer> | inherit
Initial: none
Applies to: block-level elements
Inherited: no
Percentage values: relative to width of the element itself

This property describes how many columns the element spans. Consider this example:

<DIV CLASS="article">
  <H1>The headline</H1>
  <P CLASS="intro">The introduction, sometimes called "ingress".
  <P>A normal paragraph.
  <P>Another normal paragraph.
</DIV>

It's convenient to wrap the DIV element around the whole article. However, the headline and ingress should span several columns:

  DIV.article { columns: 3 }
  DIV.article H1 { column-span: all }
  DIV.article P.intro { column-span: 2 }

Example

Here is a simple example using the 'column-number' property.

The text shown black on white should be flowed into two columns.

This is due to a STYLE attribute on the DIV element which sets 'column-number: 2'.

There should be a gap between the two columns. The width of the gap has not been specified, but its initial 'normal' value should ensure that there is some gap.

Variation #1

Instead of creating new naming schemes for gaps and rules between columns, new properties are created in the existing padding, border and margin families:

This would change the syntax for these properties:

Instead of accepting up to four values each (top, right, bottom, left), they would accept five (top, right, bottom, left, top).

Also, each column within the element would have a padding, border and margin area around it. Margins would collapse vertically like normal margin areas. The padding, border and margin areas are the same for all sides of all columns, except the left side of the leftmost column and the right side of the rightmost column. Unlike the column rules in the original model, the border areas in this model take up space.

The benefits of this variation is:

The disadvantages are:

Variation #2

Instead of adding new properties to set the column widths, gaps and rules, the extra complexities multiple columns introduces are addressed by adding a new pseudo-element:

P:column {
  column-number: 4;
  width: 25%;
  border: thick solid black;
  padding: 0.3em;
}

The benefits of this proposal are:

Unanswered questions