Have you ever tried to print a web page from your browser and found some crucial piece of content is being cut in half at the page break? There's a very easy way to fix this using CSS for print.

Assuming you already have a print.css file set up for your site (more on that later), you first want to identify the HTML element that is getting cut in half by your printed page-break. Using CSS Inspector (in Chrome) or Firebug (in Firefox), select the wrapper element around the content being divided. Ideally, that wrapper element will have some kind of CSS class or ID on it (if not, you can use very specific CSS selectors to target the element in question).

Use that class/ID to write a new style rule in your print.css file. Then give that new rule an attribute of:
page-break-inside:avoid;

This wonderful little CSS attribute will tell the browser's print engine to watch out for that element —if the element happens to fall across a page-break, it will push that element to the next page, avoiding a page-break "inside" the element.

Pretty cool, eh?

For more information on the family of page-break attributes in CSS, check out this entry in the CSS Almanac at css-tricks.com.