Multi-column layout

●●●●●●●

Two ways to use columns

●●●●●●●

Two ways to use columns:

• Give the number of columns: columns: 3

• Give the desired column width: columns: 20em

  The real width may be more, if the element's width isn't a multiple of the column width.

Gaps: column-gap

●●●●●●●

From the demo:

P.a {
  column-gap: 3em;
  column-rule: 1em solid red }
P.b {
  column-gap: 1em;
  column-rule: 2em solid lightgreen }

The rule is centered in the gap and does not increase the gap!

Unbalanced columns

●●●●●●●

If an element has a fixed height, columns can be filled in two ways:

• column-fill: balance
  divide the text over all columns
• column-fill: auto
  fill each column to the maximum height, starting from the first

Text that spans columns

●●●●●●●

From the demo:

<H2>Column-span:none</H2>
<P>Lorem ipsum dolor...
<P>Nulla sagittis, odi...
<H2>Column-span:all</H2>
<P>Lorem ipsum dolor...
<P>Nulla sagittis, odi...

body {columns: 18em}
h2 {column-span: all}

Numbers (column-span:3) may come in CSS level 4

New column, widows & orphans

●●●●●●●

H2 {page-break-after: avoid}

(break-after is the new name for page-break-after, but not yet supported everywhere)

div {
  widows: 1;
  orphans: 1 }

The normal value for both is 2

Status

●●●●●●●

• Opera 11, 12 – small bugs
• AHFormatter 5, 6 – (not tested)
• Prince 8 – no column-span
• IE 10 – (not tested)
• Safari, Firefox, Chrome – experimental, no break-*
• PDFreactor 5 – experimental

For older browsers you can try columnizer (if the user has JavaScript turned on)