Firefox Ignores Page-break-before When Printing

I have a @media print{} section to tweak a site for printing. I'm forcing a page break before main blocks. However, elements overlap in Firefox (other browsers render everything as

Solution 1:

It is because of the float. page-break goes bonkers on floats. From your use-case, it seems Firefox is being extra finicky on this.

Option 1:

Remove float in your @media print styles, if you can make do with a single column.

The changes required would be (as per your fiddle):

@media print { 
    .col { float: none; width: auto; } /* remove the floats for print */.extra { page-break-before: always; } /* no change here */
}

Option 2:

Clear the floats not on the parent (actually it should have been on your inner parent though instead of outer one in your fiddle, not that matters here); but clear it on an extra div sibling of your .cols.

The changes required would be (as per your fiddle):

Markup

<divclass="cols"><divclass="col col1de2">Sed lacinia mi..</div><divclass="col col2de2"> Suspendisse sit amet..</div><divclass="clear"></div><!-- clear the float here --></div>

CSS

.col { float: left; width: 40%; } /* no change here */.clear { clear: both; } /* clear here */

To summarize: Make sure there are no floats or clearing floats immediately preceding or succeeding the element on which page-break-x is applied.