CSS column breaks?

Question

I have been trying CSS columns, but I can't get breaks to work. Here's the CSS so far:

#container { 
    width: 500px;
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
} 
h1 {
    break-after: always;
    -moz-column-break-after: always;
    -webkit-column-break-after: always;
}

And here's the relevant HTML:

<div id="container">
    <h1>The header of the first column</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Maecenas interdum mattis leo, id vehicula sapien ultricies et.</p>
    <p>Donec orci nunc, rhoncus ut convallis a, pretium quis elit.</p>
    <p>Aenean vulputate vulputate bibendum.</p>
    <p>Fusce imperdiet velit quis diam fermentum ut volutpat ipsum convallis.</p>
</div>

No matter if I do break-after: avoid, break-after: always, break-before: avoid or break-before: always I still get the same result. Nothing changes. Can somebody help me out? I have tested it in Firefox 4.6 and Safari 5.0.5.

Thanks

Answer 1

The CSS column break rules are poorly supported, but I've found a workaround that does something close enough. Instead of writing this:

 <div class="columns">
    <h1>Heading</h1>
    <p>Paragraph</p>
 </div>

I'm writing this:

 <div class="columns">
    <div class="keeptogether">
       <h1>Heading</h1>
       <p>Paragraph</p>
    </div>
 </div>

Then the CSS looks like this:

 div.columns {
    column-width: 300px;
    -moz-column-width: 300px;
    -webkit-column-width: 300px;
 }
 div.keeptogether {
    display: inline-block;
    width: 100%;
 }

You can see the results here, for example.

Answer 2

I encountered the same kind of issue and solved it as follows.

My main issue was not inserting a break after each "heading/paragraph" block but avoiding a column break inside a "heading/paragraph" block.

The solution is easy :

1. Enclose each "heading/paragraph" block in a span tag.

2. In the CSS, add a reference to the span tag, with the following code in it :

   display: inline-block; width: 100%;

The little drawback is that this may leave blank areas at the bottom of some columns.

In my case the whole css is as follows (div defines the global formatting of the data flow):

div {
    -webkit-column-width: 20em; /* 20em wide */
    -webkit-column-gap: 2em;  /* 2em gap */
    -webkit-column-rule: 1px solid #eee;   /* 1px border between columns */
    -webkit-column-count: 3; /* 3 columns max! */

    -moz-column-width: 20em;
    -moz-column-gap: 2em;
    -moz-column-rule: 1px solid #eee; 
    -moz-column-count: 4;

    -ms-column-width: 20em;
    -ms-column-gap: 2em;
    -ms-column-rule: 1px solid #eee; 
    -ms-column-count: 3;

    column-width: 20em;
    column-gap: 2em;
    column-rule: 1px solid #eee; 
    column-count: 3;

    padding: 5px;
}

.tokeeptogether {
    display: inline-block;
    width: 100%;
}

Answer 3

Here's what the problem is - no column break after "The header" in Safari and Firefox:

According to this, this and this the column breaks don't work as yet.

Answer 4

Column breaks have never been supported in previous versions of Safari - my guess this is still the case. It is rather weird that Apple have written that it is supported since 3.0 though (Safari documentation about column breaks) ...

Same goes with Firefox. Chrome is the only browser which supportes almost all, if not all, column controls.