13

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.

Asad Saeeduddin
  • 46,193
  • 6
  • 90
  • 139
Zach
  • 161
  • 1
  • 2
  • 10
  • What's your CSS? Because you need page-break-after: always, not just the attribute. What browser? Tested in multiple? – Sean Feb 04 '11 at 06:53

2 Answers2

23

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

Adrien Coquio
  • 4,870
  • 2
  • 24
  • 37
15

try this after every </div> tag

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

it works for me...

Ghan Shyam
  • 626
  • 1
  • 6
  • 18
  • This worked except in Chrome. It seems like Chrome is the only one still giving me trouble. Nothing seems to work for it. @Sean the css is .print {page-break-after:always;} and that class is applied to multiple divs that need to be printed. – Zach Feb 05 '11 at 01:02
  • Safari is also giving me problems. It seems webkit has issues with page-break. – Zach Feb 05 '11 at 01:40