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

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.