Forcing a page break only when necessary during print

Question

I am currently trying to avoid a page break in the middle of a div. I would like it to break only if the page break occurs in the middle of the div. However I have tried page-break-inside: avoid and it does nothing. I can not force a page break before the div because I don't know how long the page will be. Any help or another idea would be nice.

Here is the dive I am trying to avoid a page break in:

<div style="page-break-inside: avoid;">
        <h2 style="height:18px;">
            <span>
                <div style="width:52%; float:left;">**Delinquency Notice** as of 12/31/13</div>
                <div style="width:48%; float:left;">Recent Account History</div>
                <div styly="clear:both;"/>
            </span>
        </h2>
        <div>
            <div class="leftColumn">
                <div class="small_padding">
                    <span class="bold_text">
                        You are late on your mortgage payments.
                    </span>
                    As of 4/17/2015, you are 106 days late on your mortgage payments. 
                    Failure to bring your loan current may result in fees and 
                    foreclosure -- the loss of your home.
                    <div class="small_top_padding">
                        If you are experiencing financial difficulty, HUD (U.S. Dept 
                        of Housing and Urban Development) approved counseling agents 
                        are available to provide mortgage and foreclosure counseling 
                        assistance. Refer to the HUD disclosure section on the 
                        statement front for contact information.
                    </div>
                </div>
            </div>
            <div class="rightColumn">
                <div class="recent_history_body">
                    <ul style="list-style-type: disc;">
                        <li>Payment due 12/01/2014: Fully paid on 11/30/2014</li>
                        <li>Payment due 1/01/2015: Unpaid balance of $1,290.02</li>
                        <li>Payment due 2/01/2015: Fully paid on 1/31/2015</li>
                        <li>Payment due 3/01/2015: Fully paid on 2/28/2015</li>
                        <li>Payment due 4/01/2015: Fully paid on 3/17/2015</li>
                        <li>Current payment due 5/01/2015: $1,290.02</li>
                    </ul>
                    <div class="recent_history_total">
                        Total: $6,495.86 due. You must pay this amount to bring your loan current.
                    </div>
                </div>
            </div>
        </div>
    </div>

Here is a screen shot of the print in google chrome.

Answer 1

try with

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

or this (browser dependent)

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

for chrome try this

  div.page
  {
    page-break-after: always;
    page-break-inside: avoid;
  }

For IE11 seems are problem with div try surrounding with a p

page-break-after doesn't work with a div tag. Try a p or br tag

 <p style="page-break-before: always">&nbsp;</p>

Answer 2

Terns out that embedding divs are not supported for page-break-inside:avoid. In order to accomplish what I was trying to do, I needed to convert my html to a table and surround it with a single div. This also works on FF(38.0.5), IE(11), and Chrome(43.0.2357.130 m)

<div style="page-break-inside: avoid;">
   <table style="width:100%;">
       <tbody>
       <tr>
            <td style="width:400px;">
                 <h2>**Delinquency Notice** as of 12/31/13</h2>
            </td>
            <td style="width:400px;">
                 <h2>Recent Account History</h2>
            </td>
        </tr>
        <tr>
            <td class="padding"><b>You are late on your mortgage payments.</b> 
                    As of 4/17/2015, you are 106 days late on your mortgage payments. 
                    Failure to bring your loan current may result in fees and 
                    foreclosure -- the loss of your home.<br/><br/>If you are experiencing financial difficulty, HUD
                    (U.S. Dept 
                    of Housing and Urban Development) approved counseling agents 
                    are available to provide mortgage and foreclosure counseling 
                    assistance. Refer to the HUD disclosure section on the 
                    statement front for contact information.
            </td>
            <td class="padding">
                <ul style="list-style-type: disc;">
                    <li>Payment due 12/01/2014: Fully paid on 11/30/2014</li>
                    <li>Payment due 1/01/2015: Unpaid balance of $1,290.02</li>
                    <li>Payment due 2/01/2015: Fully paid on 1/31/2015</li>
                    <li>Payment due 3/01/2015: Fully paid on 2/28/2015</li>
                    <li>Payment due 4/01/2015: Fully paid on 3/17/2015</li>
                    <li>Current payment due 5/01/2015: $1,290.02</li>
                </ul>
                <br/><b>Total: $6,495.86 due. You must pay this amount to bring your loan current</b></td>
        </tr>
        </tbody>
    </table>
</div>