Controlling Wrapping in CSS3 Columns

CSS3 introduces the very handy columns support which is implemented in WebKit and Firefox browsers going back a fair way and degrades gracefully in all browsers that don’t support it (which appears to include IE9 sadly). The downside however is that support for the corresponding column-break property to control where column breaks are allowed to occur doesn’t appear to exist despite documentation suggesting it should. So for example1{#footlink1:1293713493905.footnote}:

<div style=”column-count: 3”>
  <div class=”item”>
    <h1>Heading</h1>
    <p>Content</p>
  </div>

  <div class=”item”>
    <h1>Heading</h1>
    <p>Content</p>
  </div>
</div>

Since column hights are always equal, the two items above will be split across the three columns. To keep each item together in a column, we should be able to use column-break-inside:

div.item { column-break-inside: avoid; }

but this doesn’t appear to have any effect in current Safari or Firefox. As a work around however, we can reach for the ever useful, inline-block style:

div.item { display: inline-block; }

Since inline-block items participate in the layout around them like empty elements (e.g. img) they can’t be split across columns. Note however, that the wrapping div no longer causes a line break so the rendering would break if you had text as a direct child of the DIV as it would allow two items to potentially appear on the same line (if they both fit in full). In this case however the content is using H1 and P tags which enforce the line breaks themselves.

1 – imagine these styles have the appropriate -webkit- and -moz- prefixes, I’m using the unprefixed versions just for brevity. ↩