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

css printing print-css
Zach picture Zach · Feb 4, 2011 · Viewed 9.2k times · Source

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

Adrien Coquio picture Adrien Coquio · Jun 11, 2011

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

Related questions

Need to remove href values when printing in Chrome

I'm attempting to customize the print CSS, and finding that it prints links out with the href value as well as the link. This is in Chrome. For this HTML: <a href="http://www.google.com">Google</…

Read More
How to make HTML pages print at a consistent size from Chrome?

I'm designing a set of HTML pages to be printed, and I want elements of the pages to end up the same scale as each other. For example, there's a class of div whose width is defined as 200px wide …

Read More
How to see the print media CSS in Firebug?

Firebug is an excellent tool to to show a screen media CSS for some HTML element, but is there a way to look at the print media CSS too? Or is there any other tool to see the print media …

Read More