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.

Answer 1

try this after every </div> tag

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

it works for me...

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