Columns

Back to the index.

CSS3 multicolumn specification.

This module serves to split up an element into multiple columns, and to give further instructions about a few details.

This is the desktop table. See also the mobile table.

Last major update on 6 January 2013.

I'm writing a CSS book.

Selector or declaration IE9 and lower IE10 FF 17 Win FF 17 Mac Safari 6.0.2 Mac Chrome 23 Win Chrome 23 Mac Yandex 1.1 Mac Opera 12.12 Win Opera 12.12 Mac
break-before: column
Making sure a column breaks occurs just before or after an element 		No Buggy No Alternative Alternative Yes 
-webkit-column-break-before: always;
break-before: column;

Note the different keywords in the standards-based an the WebKit syntax. Use after instead of before if you need it.

  • IE10 refuses to stretch up the multicolumn element if that’s necessary to keep the content inside after a forced break.
break-inside: avoid (columns)
Avoid column breaks within an element

Secondary test page: my CSS main page, where I use columns for the index. Individual entries should not be broken over two columns. 		No Possibly No Alternative and buggy Alternative and buggy Yes 
-webkit-column-break-inside: avoid;
break-inside: avoid;
  • IE10 fails the test on the test page, but avoids breaks properly in the CSS main page. So it could be it supports this declaration. Investigating.
  • The WebKit-based browsers now break the paragraph at the last line instead of two lines earlier. Although this is allowed according to the spec (you should try to avoid breaks), I don’t see the point here, since the new effect is worse than the original.
column-count
 No Yes -moz- -webkit- -webkit- Yes 
-prefix-column-count: 4;
column-fill
 No Yes No No No Yes 
column-fill: auto;

By default, columns should be balanced if the height is too large (balance keyword). The auto keyword tells the browser to fill the height entirely and leave gaps at the end of the last column, if necessary.
column-gap
 No Yes -moz- -webkit- -webkit- Yes 
-prefix-column-gap: 5em;
column-rule
 No Yes -moz- -webkit- -webkit- Yes 
-prefix-column-rule: 5px double red;
column-span
 No Yes No No No Yes 
column-span: all;
column-width
 No Yes -moz- -webkit- -webkit- Yes 
-prefix-column-width: 10em;
Selector or declaration IE9 and lower IE10 FF 17 Win FF 17 Mac Safari 6.0.2 Mac Chrome 23 Win Chrome 23 Mac Yandex 1.1 Mac Opera 12.12 Win Opera 12.12 Mac