The “Go Green” tag has become so famous that most of the places which asked for a print proof are voiding it now. Take cinemas, trains and buses for example. But that doesn’t mean that the internet enabled devices has replaced everything. We still need paper! And coming to the point, I was coding a simple page, that has to have some detail in the page 1 and the rest in page 2 (read with printer in mind).
I had some knowledge about the page-break css and used it.
The code worked perfectly in firefox, while in Chrome everything was in a single page. Your browser interprets to the printer, how the page should be printed on paper. So don’t curse your printer now! What next? Googling for answers and trying out different things. Finally one thing worked for me and here it is.
Remove float for the parent element, meaning – set float:none
It is mandatory that the parent elements should not float for the page break to work as desired.
Additional tip: Do not try page-break attribute on empty div’s that doesn’t work too.
Here are the available options for page-break
page-break-before : auto | always | avoid | left | right
page-break-after : auto | always | avoid | left | right
page-break-inside : auto | avoid
Happy printing !
