How do I print with CSS and have the page breaks in the right places?

Question: How do I print with CSS and have the page breaks in the right places?

I got the following question from Nancy:

Often times, we have a picture and caption interspaced with the text. We would like the picture to print with the text and print the whole picture on the page with the text instead of the 1) picture printing on the next page 2) picture printing part on one page and part on another page.

Answer:

What you need to do is put a container element (like a div) around both the image and the text, then in your print style sheet, use the page-break-inside property set to "avoid":

page-break-inside: avoid;

Other style properties that might work for what you're looking for are page-break-before and page-break-after.

You should probably learn how to set up a print style sheet if you don't already know how.