I'm trying to use a print.css to print one div per page, and I'm failing

Question

An example of my code is this:

<div class="print">
This div needs to be on one page.
</div>

<div class="print">
This div needs to print on a separate page.
</div>

I have a couple divs like above, and I need each div to be on it's own page when printed. I've tried 'page-break-before' and 'page-break-after' on the .print class in print.css. I'm not sure what I'm doing wrong.

It seems to me like 'page-break-after' would be right, and that's the solution I always find when searching, but I just can't seem to get it working.

Incompetent

What's your CSS? Because you need page-break-after: always, not just the attribute. What browser? Tested in multiple? – Sphinx

Answer 1

try this after every </div> tag

<br clear="all" style="page-break-before:always" />

it works for me...

Bankruptcy

This worked except in Chrome. It seems like Chrome is the only one still giving me trouble. Nothing seems to work for it. @Sphinx the css is .print {page-break-after:always;} and that class is applied to multiple divs that need to be printed. – Incompetent

Safari is also giving me problems. It seems webkit has issues with page-break. – Incompetent

Answer 2

You should use the css rule :

.print {page-break-after:always;}

It works for me in Chrome 12.0 and Firefox 3.5

The solution given by Allex using a br tag does not work in this version of Chrome

Highfalutin

Tested on Chrome & Safari. Fantastic! – Insensibility