4

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 expected). As the following print preview illustrates, red block displays on top or previous content rather than jumping to page 3:

Print preview

HTML structure is like this:

<div class="cols">
    <div class="col col1de2">This is the yellow block</div>
    <div class="col col2de2">This is the blue block</div>
</div>
<div class="extra">This is the red block</div>

... and this is the relevant CSS:

.cols{
    overflow: hidden;
}
.col{
    float: left;
    width: 40%;
}
.extra{
    page-break-before: always;
    clear: both; /* Attempted workaround: didn't work */
}

You can see in it action though you need to print JSFiddle's Result frame (possibly to a PDF printer—not sure about how to trigger Print Preview menu item in a frame).

Can you figure out a fix or workaround?

Álvaro González
  • 142,137
  • 41
  • 261
  • 360

2 Answers2

3

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

<div class="cols">
    <div class="col col1de2">Sed lacinia mi..</div>
    <div class="col col2de2"> Suspendisse sit amet..</div>
    <div class="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.

Abhitalks
  • 27,721
  • 5
  • 58
  • 81
  • Both approaches solve the issue in my simplified test case, I'm sure I'll make one of them work in the real site. Thank you! – Álvaro González Aug 19 '15 at 09:56
  • BTW, a `position: relative` element with `position: absolute` children inside cause the same issue. – Álvaro González Aug 19 '15 at 12:59
  • @ÁlvaroG.Vicario: Yes. Print media is delicate in that sense. Needs much more care than screen styles. There are many more problems like [this](https://github.com/twbs/bootstrap/issues/12078) and [this](https://github.com/twbs/bootstrap/issues/14868). At best, it is better to create much simpler and linear styles for print. – Abhitalks Aug 20 '15 at 14:28
0
  page-break-after: always;

has been replaced by

break-after: always;

in new firefox
use both of these to prevent the problem

page-break-after: always;
break-after: always;

https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after

adel parsa
  • 236
  • 2
  • 5