I have a page which has a bunch of divs one after the other, generated by a loop, all having the same class, and all the divs contain images and text. I need to style this page for printing. I have followed all basic principles relating to size, color, margins and the likes.
However, I don't want the boxes to split between pages when they are printed, as it happens when a box begins near the end of a page and some text is printed and the rest on the next page. I used javascript to insert a page-break div (has the style page-break-before:always) when the total height of the divs on the page exceeds 800 (assumed value).
However when I print, text size changes and the divs get longer/shorter and page breaks are misplaced.
I am doing the same thing that the answer here says. My question is what do I assume the width/height of the printed page as? Or is there a better solution?
How do I deal with this? Thanks in advance.
EDIT : I use print-specific css, fyi. Also I have specific media styles and print styles.
EDIT (attempt to visualize)
-------div 1------
| |
| |
| |
-----div 2-----
| | WRONG
| |
| |
----div 3-------
| |
| |
| auto page break|
----page 1 ends----
| |
| |
| |
----div 4----------
-------div 1------
| |
| |
| |
-----div 2-----
| | RIGHT
| |
| script
generated
page break |
----div 3-------
| |
| |
| |
----page 1 ends----
| |
| |
| |
----div 4----------
Never mind. I assumed the width as 600 and my height as 800. I haven't found the best combination but this works as well.
thanks for the help.