CSS page-break-after PropertyS2C Home « 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>
<!-- Our HTML/CSS for the CSS page-break-after property follows -->
<html lang="en">
<head>
<title>CSS Reference - CSS page-break-after Property</title>
<link href="https://server2client.com/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="https://server2client.com/images/beefalepiesmall.jpg"
alt="Beef and Ale Pie">
</p>
<p>3 properties set for border in width.
<img id="img2" src="https://server2client.com/images/beefalepiesmall.jpg"
alt="Beef and Ale Pie">
</p>
<div class="printfoot">Copyright 2011, server2client.com<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="https://server2client.com/images/beefalepiesmall.jpg"
alt="Beef and Ale Pie">
</p>
<p>Set individual properties.
<img id="img4" src="https://server2client.com/images/beefalepiesmall.jpg"
alt="Beef and Ale Pie">
</p>
<div class="printfootend">Copyright 2011, server2client.com</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:
Homepage
Top