B.83. page-break-before

When printing a Web page, the browser simply places page breaks where they need to occur in the content so that all printed pages are as full as possible by default. This property affords you greater control over the placement of page breaks during printing, by letting you manually add or suppress a page break before a given element.

Inherited: No

See also: Section B.72orphans, Section B.82page-break-after, Section B.84page-break-inside, Section B.125widows

B.83.1. Value

This property can take any of the following values:

always

The browser will always put a page break before the selected element(s).

avoid

The browser will try to avoid placing a page break before the selected element(s).

The practical effect of this setting is to keep an element on the same page as the previous sibling element.

auto

The browser will put a page break before the selected element(s) if the previous element ended at the bottom of a page.

left

The browser will always put one or two page breaks before the selected element(s) so that they begin at the top of a left-hand (i.e. even-numbered) page in double-sided printing.

right

The browser will always put one or two page breaks before the selected element(s) so that they begin at the top of a right-hand (i.e. odd-numbered) page in double-sided printing.

Initial value: auto

B.83.2. Compatibility

CSS Version: 2

This property works in Internet Explorer 4 or later, Netscape 7 or later, Mozilla, and Opera browsers. All of these browsers treat left and right the same as always.

The avoid value is not directly supported by Internet Explorer for Windows; however, if you use a JavaScript to set the property to an empty string ("") it will have the same effect.

B.83.3. Example

This style rule adds the necessary page breaks to place all div elements of class section at the top of a right-hand page:

div.section {
  page-break-before: right;
}