I have a page with several nested divs, something like the following:
...
some content here
Some other content here that should print on a separate page.
</div>
....
</div>
When printing, I want it to print with a page break between the “page1” div and the “page2” div. In my main CSS file, I have tried:
- adding
page-break-before:always; to the page2 div
- adding
page-break-after:always; to the page1 div
- adding
page-break-inside:avoid; to the page2 div, which should have the effect of pushing it to a new page
Yet none of the above seem to have any effect – when I print, from Firefox, chrome or Safari on mac (haven’t tried on windows yet), page2 div always starts on the same page as page1 div, causing it to be split in the middle. I even tried adding a @page rule with the size element set, just in case it needed that to be able to figure out page breaks, but still, nothing. What am I missing here?
EDIT: I’m not sure what’s going on with the display of my code. It looks fine in preview. But what it is, really, is just a couple of divs nested a couple of levels deep.
