CSS column breaks?

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

Solution 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%;
}

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

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