CSS page-break not working

Question

I am using "page-break-after" attribute on div.

The CSS class -

div.breakhere {
    page-break-after: always;
    margin: 0! important;
    width: 100%;
}
.fancyTable {
    height: 100px;
    float: left;
}

and the div in the page is

---

---

 <div id="summary" width="100%">
        <table class="fancyTable" width="50%" ></table>
        <table class="fancyTable" width="50%"></table>
    </div>
    <div class="breakhere"> </div>

----

It's working perfectly except following case.

• When "The div with id 'summary'" exactly before "The div with breakhere class" come at the end of page. Part of the div and tables printed in the next page. The next page is not break by breakhere class. Please check the following screen.

What actually I am doing wrong? Thanks in advance.

Answer 1

I solve the problem.

Problem is the float left in the fancyTable class -- .fancyTable { height: 100px; float: left; }

I just nest the tables instead of giving them width 50%. like -

<div id="summary" width="100%">
    <table>
        <tr>
            <td><table id="table1" class="fancyTable" width="50%" ></table></td>
            <td><table id="table1" class="fancyTable" width="50%" ></table></td>
        </tr>
    </table>
</div>