html5 Site Icon CSS3 Site Icon CSS Site Icon

CSS 1/2 Reference

CSS page-break-after property

Definition

The CSS page-break-after property allows us to specify page break behaviour to occur after this block-level element.

Applies To

All block-level elements.

Property Values

always - force a page break after this block-level element.

auto - page breaking is handled by the user agent.

avoid - avoid page breaking after this block-level element, if possible.

inherit - page-break-after attributes are NOT inherited from the parent element unless specified using the inherit value.

left - force one or two page breaks after this block-level element so the next page is formatted as a left page.

right - force one or two page breaks after this block-level element so the next page is formatted as a right page.

Conforming user agents may intepret left and right as the auto value.

Default Value

Default value is set to auto.

Inheritance

The page-break-after properties are NOT inherited from the parent element.

Browser Anomalies

The avoid, left and right, property values have little browser support and only function fully in Opera.
IE5, IE6 and IE7 do not support the inherit property value.
IE8 does with a valid !DOCTYPE.
IE9+ supports the inherit property value.

Example



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Our HTML/CSS for the CSS page-break-after property follows -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS 1/2 Reference - CSS page-break-after Property</title>
<link href="http://htmldoctor.info/css/css_lesson_7_main.css" 
      rel="stylesheet" type="text/css" />

<!-- Valid values for CSS page-break-after Property are:
	
	always, auto, avoid, inherit, left and right. 
	
--> 

<style type="text/css" media="print">
/* Break our page here */
.break_after {
  page-break-after: always !important;
}
/* Set a style for our page headers */
.printhead {
  font: 2.5em "Comic Sans", Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  display: block; 
  height: auto;
  text-align: center;
  border-bottom: 2pt solid #000;
  padding: 10pt 0;
  margin: 0;
  margin-bottom: 20pt;
}
/* Set a style for our page breaks */
.printfoot, .printfootend { 
  font: 2.5em "Comic Sans", Georgia, "Times New Roman", Times, serif;
  display: block; 
  margin-top: 25pt; 
  text-align: left; 
}
</style>
</head>

<body>
<div class="printhead">  HTML and CSS Tutorials</div>
<h1>Looking at the page-break-after CSS property</h1>
<p>Set all borders then change right hand border only.
<img id="img1" src="http://htmldoctor.info/images/beefalepiesmall.jpg"
    alt="Beef and Ale Pie" />
</p>
<p>3 properties set for border in width.
<img id="img2" src="http://htmldoctor.info/images/beefalepiesmall.jpg"
    alt="Beef and Ale Pie" />
</p>
<div class="printfoot">Copyright 2011, htmldoctor.info<br class="break_after" /></div>
<div class="printhead">  HTML and CSS Tutorials</div>
<p>2 properties set for border colour and style.
<img id="img3" src="http://htmldoctor.info/images/beefalepiesmall.jpg"
    alt="Beef and Ale Pie" />
</p>
<p>Set individual properties.
<img id="img4" src="http://htmldoctor.info/images/beefalepiesmall.jpg"
    alt="Beef and Ale Pie" />
</p>
<div class="printfootend">Copyright 2011, htmldoctor.info</div>
</body>
</html>

How It Looks

The results of using the page-break-after property with the values above and then using the print-preview option form the file menu will look something like the following:

notepad
CSS padding-top    << Prev          Next >>   CSS page-break-before

go to home page Homepage go to top of page Top

CSS properties

The complete set of visual CSS properties from the latest 2.1 Specification.

Click the links for more information on individual properties and their values.