Sales or Technical Support: (503) 468-4890 or
help@buildableworks.com

How to add page breaks to html

We often get the question about creating HTML that sends proper page breaks to the printer.

This article has been updated in July 2017

This method works in Chrome, Firefox and IE and has been tested in July 2017 - try printing this page

Example HTML:

... content in page 1 ...
<p style="page-break-after: always;">&nbsp;</p>
<p style="page-break-before: always;">&nbsp;</p>
... content in page 2 ...

For example, if you try printing this page (try Chrome print preview) the second and third lines below should be on a separate pages. Inspect these elements, the css is inline:

Page break below this line

This should be printed on a lonely page

This should also be printed on a separate page

Next. there are few very important considerations:

It's done via CSS (inline or in a stylesheet) by adding 'page-break-after: always' to a paragraph at the bottom of your page (above where you intend to break). Optionally, you may need to also add 'page-break-before:always' to the paragraph or heading (or other block level element) at the top of the next page.
If you use a stylesheet, use print media query to wrap the CSS for printers. For example, in your CSS, add a section like this: @media print { /* styles for printers */}
If you use a stylesheet, make sure it is included without a default media attribute. Lots of older sites would add media="screen" to stylesheet inclusions, rendering any CSS media query in those stylesheets useless.
Kills the floats! If any parent container is floated, page breaks won't work. In your CSS for printers, disable all the floats of parent containers by setting 'float: none !important;' on the parent containers of the content you wish to print with page breaks (important - we do it on this site). Woah, that was wordy .. it could have used a break!
Use on block elements: make sure the elements containing the 'page-break-*' rules are blocks, not inlines (ex: DIV, P, OL, etc. but not SPAN or A)
You may need to use both 'page-break-after: always' and 'page-break-before:always' (buggy Chrome...). In the example above, we show cased multiple options which work.
And finally, chrome print is finicky