+ Start a Discussion

CSS page-break-inside

I have two <div>s. I know I can use page-break-after on the first <div> to force a page break, but I don't want to force a break. I only want to break after the first <div> if the second <div> won't fit on the same printed page as the first <div>.

I want 0 widows from the first <div> to show up on the next page where the second <div> starts.


So, if I use


as expected, I get a page break between the first <div> and the second <div>, and I get 2 "widows" on the next page, which I would expect because 2 widows is the default.


However, so that I don't get any "widows" I try to use


.break{page-break-inside:avoid; widows:0;}


However, when I do that, the page break does not occur at all. I've tried setting children:0; widows:0; and various combinations of both, but don't seem to be able to get things to work correctly.


Any help would be appreciated.