CSS Printing: Avoiding cut-in-half DIVs between pages?

Question

I'm writing a plug-in for a piece of software that takes a big collection of items and pops them into HTML in a WebView in Cocoa (which uses WebKit as its renderer, so basically you can assume this HTML file is being opened in Safari).

The DIVs it makes are of dynamic height, but they don't vary too much. They're usually around 200px. Anyway, with around six-hundred of these items per document, I'm having a really rough time getting it to print. Unless I get lucky, there's an entry chopped in half at the bottom and top of every page, and that makes actually using printouts very difficult.

I've tried page-break-before, page-break-after, page-break-inside, and combinations of the three to no avail. I think it might be WebKit not properly rendering the instructions, or maybe it's my lack of understanding of how to use them. At any rate, I need help. How can I prevent the cutting-in-half of my DIVs when printing?

Answer 1

This should work:

@media print  
{
    div{
        page-break-inside: avoid;
    }
}

Answer 2

The possible values for page-break-after are: auto, always, avoid, left, right

I believe that you can’t use thie page-break-after property on absolutely positioned elements.

Answer 3

I have the same problem bu no solution yet. page-break-inside does not work on browsers but Opera. An alternative might be to use page-break-after: avoid; on all child elements of the div to keep togehter ... but in my tests, the avoid-Attribute does not work eg. in Firefox ...

What works in all ppular browsers are forced page breaks using eg. page-break-after: always

Answer 4

Only a partial solution: The only way I could get this to work for IE was to wrap each div in it's own table and set the page-break-inside on the table to avoid.