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.

Answer 5

It seems the h1 in the sample is exactly big enough to always cause a break after it, if you shorten it to just "The head", the break-after has an effect.

Answer 6

If I'm not mistaken, you want the header to go across all columns and let only the following siblings to be split, right?
I'm afraid column breaks still do not work as intended, so - it may not be the most "orthodox" solution, but saved me - I fixed this with some funky styling:

Essential HTML:

<div class="container">
  <h1>Header</h1>
  <p>First paragraph</p>
  <p>Second paragraph</p>
  <p>Third paragraph</p>
</div>

Essential CSS:

.container{
  column-count:3; /* Add necessary prefixes */
  padding-top:2em;
  position:relative;
}
.h1{
  position:absolute;
  top:0;
}

Absolute positioning exempts that element from the columns flow and seems to work just fine.

P.S.: just noticed the post is rather old...well, I hope this helps someone else, support for these CSS properties hasn't improved that much

Answer 7

break-after: 

is incorrect, should be:

column-break-after

also, no one has mentioned these properties:

-webkit-column-span: all;
-moz-column-span: all;
column-span: all;

which sound like they could be useful here

edit: also, it should be mentioned that support for columns is now pretty decent actually, albeit with the use of vendor prefixes.

column-fill

is still not supported by most browsers but AFAIK the majority of other properties are