html - 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.