Enforce Print Page Breaks with CSS - css

Question

I have a page that basically displays all work orders for a given day. I have tried to create the HTML so that I can use page-break-after: always to create a logical print page break and continue on. However when the user prints the page, there are often overlaps, multiple work orders on the same page, etc. I simply want to enforce a hard page break that Firefox, Safari, and Chrome will listen to.
My HTML looks like this
<div class="WOPrint">
<div class="WOHeader">
<h1>Header stuff</h1>
</div>
<!-- content -->
</div>
<div class="WOPageBreak"></div>
<div class="WOPrint">
<div class="WOHeader">
<h1>Header stuff</h1>
</div>
<!-- content -->
</div>
<div class="WOPageBreak"></div>
<!-- repeat N times -->
<div class="WOPrint">
<div class="WOHeader">
<h1>Header stuff</h1>
</div>
<!-- content -->
</div>
<div class="WOPageBreak"></div>
and my CSS is basically like so:
.WOPrint
{
max-width: 100%;
padding-bottom: 3em;
}
.WOHeader
{
display: block;
page-break-inside: avoid;
}
.WOPageBreak
{
height: 1px;
width: 100%;
float: left;
page-break-after: always;
display: block;
}
EDIT
In a hackish attempt I have played around with setting the WOPrint class min-height. Changing it to 9 inches seems to give me enough margin room for printing from all Safari, Firefox, and Chrome when I have it set to a standard US paper size. This is certainly not the way I would like to fix it, but I also don't want to have to render to PDF.
.WOPrint
{
max-width: 100%;
padding-bottom: 3em;
min-heihgt: 9in
}

Answer 1

short answer. You can't it's not consistetly supported across all browsers. there is slightly better support for page-break-before than page-break-after though...
see page-break-before compatibility and page-break-after compatibility
you could also try embedding a Ctrl-L in the page at those points thought I'm pretty sure a lot of printer drivers are gonna ignore that.

Answer 2

By setting the min-height in the WOPrint CSS class I'm able to fake an approximate page break for a standard height page:
.WOPrint
{
max-width: 100%;
padding-bottom: 3em;
min-height: 9in;
}

Answer 3

All you need is
.WOPageBreak
{
page-break-before: always;
}
However, you'll also want to add "overflow:visible" to the body tag because without it Firefox will only print the first page.
You may also get more consistent results if you set margin:0 on the body when printing, like so:
#media print{body{margin:0}}