When it comes to designing and building a website there’s not really a limitation to how big, small, wide or thin you make it, the users resolution being the only concerning factor here. When it comes to printing however we have slightly more refined constraints; the paper height and width, also margins which could be different per user.

By setting widths as percentages we can overcome the width issue quite easily. When it comes to the vertical aspect of things however one of the things you might need to consider is where the page breaks occur. If you don’t add page breaks into the HTML you might find that the page is split in the middle of a paragraph, an image, or even worse after a heading meaning the block of text the header should belong to is separated.

This might not be important in some cases but for printable documents where presentation is important (ie. reports, papers handed out to customers) this can look quite nasty.

The Solution

To solution is a simple one and can be acheived by using the CSS properties page-break-before or page-break-after and the value ‘always’. Let’s look at a few examples to see this in action:

Adding a page break before each heading on the page

h1{
	page-break-before: always;
}

Adding a page break at a particular point on the page

<div style="page-break-after:always"></div>

The second example has the style applied to a <div> element, however it could also be added to a <p>, <br /> and others.