Question

There is a content that is spread across several columns using CSS3 columns that work quite well in Firefox and Webkit, Opeara.

The problem is that column breaks with css are implemented only in webkit (webkit-column-break-before) and not in other browsers.

What would be the better way to implement the breaks.

The height of the column is fixed.

I can think of adding block element with height equal height of the column.

Would be grateful for ideas.

Thanks.

Answer 1

Without seeing any code or what you are working on, perhaps the column-count, column-gap and the column-rule properties might work.

.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;

-moz-column-rule:4px outset #ff00ff; /* Firefox */
-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
column-rule:4px outset #ff00ff;
}

If this is related specifically to the breaks and not the columns, have a look at using
break-inside: avoid-column; and -webkit-column-break-inside: avoid; or use display: inline-block; on child elements, preventing them being split between columns.