I have read through a lot of the question asked here and other places and I am confused why page-breaks don't seem to work for me. I created a test html page that looks like this:
<html>
<head>
<style type="text/css">
@media all
{
.page-break { }
}
@media print
{
div {page-break-after:always; }
}
</style>
</head>
<body>
<div class="page-break">
1content content content content content content content content content content content content
content content content content content content content content content content content content
content content content content content content content content content content content content
content content content content content content content content content content content content
content content content content content content content content content content content content
content content content content content content content content content content content content
content content content content content content content content content content content content
content content content content content content content content content content content content
content content content content content content content content content content content content
content content content content content content content content content content content content
content content content content content content content content content content content content
content content content content content content content content content content content content
content content content content content content content content content content content content
content content content content content content content content content content content content
content content content content content content content content content content content content
content content content content content content content content content content content content
</div>
<div class="page-break">
2content content content content content content content content content content content content
content content content content content content content content content content content content
content content content content content content content content content content content content
content content content content content content content content content content content content
content content content content content content content content content content content content
content content content content content content content content content content content content
content content content content content content content content content content content content
content content content content content content content content content content content content
content content content content content content content content content content content content
content content content content content content content content content content content content
content content content content content content content content content content content content
content content content content content content content content content content content content
content content content content content content content content content content content content
content content content content content content content content content content content content
content content content content content content content content content content content content
content content content content content content content content content content content content
</div>
...
</body>
</html>
I have nine of these divs. Simple enough right? This works just fine (it puts each div on a separate page as expected). Now for the stuff that is not working for IE and FF. My goal here is to create a simple html document that never breaks inside one of these 9 divs. If I change my div style to be page-break-inside:avoid it has absolutely no effect in IE or FF. If I try page-break-after:avoid or page-break-after:auto it doesn't seem to have any effect on the simple html document. Am I missing something. Does anyone have a solution that will work in both Explorer and FireFox?