CHAPTER 6 ■ BOX MODELS PROPERTIESPage Break
Problem You want to insert a page break in the document for printing purposes.^
Solution CSS provides two properties for inserting page breaks: page-break-before and page-break-
after. You can insert a page break before an element by using page-break-before:always.
You can insert a page break after an element by using page-break-after:always.
The default values are page-break-before:auto and page-break-after:auto. These default
values direct the browser to use its default algorithm to automatically determine the
location of page breaks. You can override a previously set page break using page-break-
before:auto and page-break-after:auto.
Pattern -SELECTOR { page-break-before:always; }
or
SELECTOR { page-break-after:always; }
or
SELECTOR { page-break-before:auto; }
or
SELECTOR { page-break-after:auto; }
Location This design pattern applies to all elements.
Limitations Internet Explorer 6 and Opera 9 always insert a page break whenever they encounter an
element set to page-break-before:always or page-break-after:always. This inserts an
extra blank page whenever one element is set to page-break-after:always and the next
element is set to page-break-before:always. The example demonstrates this “feature”: it
shows a screenshot of print preview in Internet Explorer 6 containing four printed pages.
The third printed page is blank. Firefox 2 doesn’t insert this extra blank page. An easy way to
avoid inserting blank pages is not to use both page-break-after and page-break-before in
the same document.
Tips If you want to print a blank page, insert an element into the document and style it with
page-break-before and visibility:hidden.
CSS provides other values for these properties and other page-break properties, but only
page-break-before:always and page-break-after:always work reliably in the major
browsers.