Hi,
Please look at the sample.html attached in this thread. In sample.html you can see two DIVs; one with yellow background and another with pink background. I do not want any page break in between these two DIVs. so I have added page-break-after: avoid; for yellow DIV & page-break-before: avoid; for pink DIV. But it did not work for me. Can you help me to avoid page break inbetween those two divs. It is ok for me, if pink DIV hides some of its content if they do not fit in the page; but I do not want pink DIV to move completely to next page.

Thanks!

1. sample.html‎ 4.7 kB ‎
   This is a sample HTML file.

Currently there is no page break between the two divs (see attached PDF).

1. sample.pdf‎ 50.5 kB

Here is the sample.pdf generated in my PC (see attached PDF).. I am using Prince 20180328.

PDF generated in my PC, has font size larger than your PDF. Can you please add some more text to yellow DIV and generate a PDF and see what happen to pink DIV?

1. sample.pdf‎ 31.6 kB

Edited 5 May 2018 by Jeffrin Manova Prabahar

Ah this is due to the different font size. If you want the extra content to be clipped instead of overflowing then I think the only solution at the moment is to specify a fixed height on the parent block and apply absolute positioning and overflow hidden to it as well.

Ok. Can you please tell me why page-break-after: avoid; for yellow DIV & page-break-before: avoid; for pink DIV did not work?

They are too big to fit on the same page, so there must be a break.

Yes, I agree, they are too big to fit on the same page. But I expect prince to draw content as much it can on the same page and hide the rest of the content. I do not expect the entire content moving to the next page. Is there any other solution to make prince draw content as much it can on the same page and hide overflowing content?

Currently this requires specifying a fixed height on the parent block, absolute positioning, and overflow hidden.