Print html div without breaking its contents between two pages

Question

When i use window.print() to print my web page, the result will be several pages. I have some html div elements that must not be break between two pages. Although, because the page contents are dynamically created, i have no way to know when my div will be broken or not.

Is there any css or javascript i can use to tell that a specific div must not be broken between two pages?

I saw the css rule "page-break-before" that i could use surrounding my div but that will cause a page break even in cases that it could be avoided (increasing the total print pages unnecessarily).

Answer 1

Your best bet is this (but has compatibility issues)

.noBreak { page-break-inside: avoid;  } 

Current compatibility (source):

Chrome     Firefox (Gecko)    Internet Explorer    Opera     Safari (WebKit)
1.0        19.0 (19)          8.0                  7.0       1.3 (312)

Other SO Discussion: alternative to page-break-inside:avoid because of compatibility issues

W3Schools