Are there any way to avoid page breaks inside a div? I want the page breaks to be before or after the div.
If you meen pagebreaks when printing you can use the following css properties page-break-after: (auto|always|avoid|left|right) Sets the page-breaking behavior after an element page-break-before: (auto|always|avoid|left|right) Sets the page-breaking behavior before an element
Yes, this is for printing, so it is irritating when the page breaks come inside a div (where I dont want it). I also read that page-break-inside:avoid is not supported by most browsers. I hoped there was another solution. Maybe do it programmatically in some way. JavaScript/PHP. ????
I used the page-break-inside/before/after in a simple invoicing tool. It did work with the major browsers if I recall this correctly (it's been quite a while though)
Um, one thing I've stumbled across is even when pagebreak works, FF has this bug (I don't know if it's fixed in Beta 3 yet) where if the div in question is a float, the float totally breaks. And, I'm not sure if it'll print the rest of the float. So if you've got any large floats, remove them from your print.css.
@Stomme poes: I usually put up a print.css where I hide all sidebars and co. So there is no need for floats.
Try {page-break-before || after: auto}. That seems to have general support. If you know which div will be at the break, use :always;. cheers, gary
Yeah, I actually discovered the float bug while reading up on print css, but if people haven't taken out their floats, or if they didn't say "Screen" for the non-print, then their printing could be inheriting the floats.