Bert Bos | CSS tutorial – columns

Multi-column layout

Multi-column layout

Two ways to use columns

Two ways to use columns:

And if the element is narrower than the desired width of one column, there will be only one column and it will be the narrower than what 'columns' specified.

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:

In both cases it is possible that there is too much text. In that case, extra columns are added on the right side, outside the element's box. Whether they are visible depends on the value of overflow.

Text that spans columns

From the demo:


<P>Lorem ipsum dolor...
<P>Nulla sagittis, odi...
<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 }

De normal value for both is 2


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