Use CSS to add page breaks

Here’s how you can use CSS to insert page breaks in your web pages for printing.

I often print a web page to a PDF file in order to keep all the graphics and layout together. I’ll often do this with my own pages for presentation handouts.

In my CSS file I add the following class definition:

.pageBreak { page-break-before: always; }

To use this I simply add a DIV tag where ever I want the printer to start a new page:

<div class="pageBreak">
<p> </p>
</div>

Keep in mind that this CSS class is only triggered in the printing of a document. It won’t affect how the page appears in the user’s browser window.


Technorati :
Del.icio.us :
Ice Rocket :