Keep an HTML element from spanning multiple pages when printed

Question

I have the following HTML that I would like to keep from being broken up when spanning multiple pages. The problem is that if I use page-break-before or after, it will put each element on it's own page. The other problem I'm having is that if I set display: block on either the cell CSS class or the wrap class, the DIV or LI still gets broken up. I have a print media CSS file and a CSS file for the screen as well. I want to keep the <li class="cell"> element and its contents from being broken up.

        <div class="pad">         <h1 style="text-align: center; margin: 10px 0">              Work Orders for Jan 05, 2011         </h1>         <p class="printHidden">             <a href="/orders/print-all/date/2011-01-05">Print All Work Orders</a>         </p>         <ul class="workorders">                                 <li class="cell">                 <div class="wrap" id="146">                      <div class="scheduled">                         <p>                             <strong>Work Order:</strong> <a href="/orders/view/work-order/146">158801</a>                         </p>                         <p>                             <strong>Client:</strong> Client Name                         </p><br>                          <b>Resources</b>                         <ul>                             <li>                                 <a href="/resources/view/resource-id/5" id="Person-5">Mikell McLaindon</a>                             </li>                             <li>                                 <a href="/resources/view/resource-id/9" id="Person-9">Jose Copper</a>                              </li>                         </ul>                     </div>                     <div class="unschedule printHidden">                         <h1 style="text-align: center; margin: 10px 0 10px; font-size: 12px; font-weight: bold;">                             Unschedule Resource for 15880-PW                         </h1>                     </div>                 </div>             </li>             {... removed for brevity ...} 

Answer 1

EDIT: PROPER SOLUTION

See: http://www.w3schools.com/css/pr_print_pagebi.asp So if you add the following to your CSS it should fix your problem:

@media print {     div.pad { page-break-inside:avoid; } } 

All the major desktop browsers now support this.

However, there is also page-break-after:avoid and page-break-before:avoid which you can add to every element within the .pad class in order to produce the same result in some older versions of browsers.

@media print {     div.pad * {          page-break-after:avoid;         page-break-before:avoid;     } } 

http://www.w3schools.com/Css/pr_print_pagebb.asp

http://www.w3schools.com/css/pr_print_pageba.asp

OLD ANSWER:

It sounds like you're trying to fit something on a page that doesn't fit on a page. I would try adding a stylesheet with media="print"...

<link rel="stylesheet" href="css/print.css" type="text/css" media="print" charset="utf-8" /> 

...that reduces the font size, padding, etc. of all of these elements so that you CAN put a page break before this section and have it fit on the page.