Advanced CSS Printing -- Using CSS Page Breaks

I have one customer that absolutely insists his web pages print perfectly. Why? Because he refuses to look at his pages on the screen -- he tells his employees to print the website for him to look at. And since he looks at pages that way, he believes most of his customers do just this.

Needless to say, I've learned quite a few tricks to making a website print properly. I've already shared methods for making your website content printer-friendly, as well as making your website structure printer-friendly. One important aspect of making your pages printer-friendly is by using CSS/XHTML page breaks.

There are numerous spots that are good for page breaks:

• Between page sections (h2 or h3 tags, depending on your site format)
• Between the end of an article and subsequent comments / trackbacks
• Between longs blocks of content

Luckily, using page breaks in CSS is quite easy.

The CSS Code

@media all 
{ 
	.page-break	{ display:none; } 
} 
 
@media print 
{ 
	.page-break	{ display:block; page-break-before:always; } 
}

The XHTML Code

<div class="page-break"></div>

The Usage

<h1>Page Title</h1>
<!-- content block --> 
<!-- content block -->
<div class="page-break"></div>
<!-- content block --> 
<!-- content block -->
<div class="page-break"></div>
<!-- content block --> 
<!-- content block -->