Page Breaks in CSS

How do you force to put page breaks in specific sections when you print a web page? The sat truth is that it is not always possible. But if you can guarantee that your visitors will be using a modern browser (read IE 6.0+ or FF 1.5+) you can do the following:

@media print {
.pbreak {
page-break-before: always;
}
}

The page-break-before command will tell the browser to put a page break right before the element of that class. There is also analogous page-break-after command. You can use it like this:

<p>This will appear on page 1</p>
<p class="pbreak">This will appear on page 2</p>
<p class="pbreak">This will appear on page 3</p>

The problem here is that not all browsers support this feature. I successfully tested this on IE 6.0, Firefox 1.5 and Firefox 2.0 and it worked in each case. I don’t think this trick works in IE 5.0 though.

[tags]css, html, printing, page break, web design, ie, firefox[/tags]

This entry was posted in programming and tagged . Bookmark the permalink.



5 Responses to Page Breaks in CSS

  1. Pingback: Paginar la salida por impresora - aNieto2K ITALY WordPress

  2. Daniel VENEZUELA Mozilla Firefox Mac OS says:

    Thanks for this! I was looking for a way to split the contents of a page I wanted to print (for an application I’m developing) because it contains large images with corresponding titles that have to be on the same page. This worked perfectly.

    Tried it with safari and firefox 2.0 and it works.

    Thanks again.

    Reply  |  Quote
  3. Luke UNITED STATES Mozilla Firefox Windows says:

    Great! I’m glad it worked for you!

    Reply  |  Quote
  4. White Flood Internet Explorer Windows says:

    Hey – that’s a great tip – thanks! I’ve just never really caught on to CSS… and I’m a programmer with PHP, old-school HTML, MySQL, C, etc! You do any work on the side? Anyhow, cool blog – I’m subscribed to your feed now so I’ll be checking in regularly!

    Reply  |  Quote
  5. Jack3d UNITED STATES Mozilla Firefox Mac OS says:

    We have been working on a print version of some sites and ive been telling my programmer this is possible with css. Im so glad this was the second site with the right answer so i did have to spend our looking for the right code. Super cool thx.

    Reply  |  Quote

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>