• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Text Controls > Setting Page Breaks for Printing

Setting Page Breaks for Printing

One problem you'll encounter when trying to print a Web site is that pages break wherever they happen to break. A Web page may actually contain several printed pages. So the header for a section might appear at the bottom of a page and its text at the top of the next page.

If you want to force a page break when printing a Web page, use the following code to define an HTML tag (see "Adding CSS to an HTML Tag" in Chapter 2).

In this example, the Web page has a new chapter starting (Figure 4.11). Normally, when this page is printed, this header might appear anywhere on the page. By adding a page break in the <h3> tag (Code 4.10), however, you can force the chapter title to appear at the top of a new page when printed (Figure 4.12).

Code 4.10. The level-3 header tag <h3> has been set up so that whenever the page is printed, a page break is forced above it.

Figure 4.11. On the screen, each section immediately follows the preceding one.

Figure 4.12. When the page is printed, the beginning of the new section forces a page break.

Table 4.11. page-break-before Values
Value Compatibility
always IE4, N6, CSS2
auto IE4, N6, CSS2

To define a page break for printing:

style type="

This CSS property works only if it is included in the style attribute of an HTML tag.


Type the property name, followed by a colon (:), in the CSS definition list.


Type one of the following values (Table 4.11) to designate how you want page breaks to be handled:

  • always, which forces a page break before the element

  • auto, which allows the browser to place the page breaks


Add other styles and then close the style attribute with quotation marks (").


Remember that this attribute will not work if it is included as part of a CSS rule—only if it is used directly in a tag with the style attribute.


page-break-after works pretty much the same way, but it puts the page break immediately after the tag.


Setting page breaks is a key ingredient in "Looking Good In Print (on the Web)" in Chapter 22.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint