I have this code at the bottom of my page.

<div class = "signature_of_preprator" style = "float: right; page-break-before:always;">

<t t-if = "doc.signature_image">

<p><img t-att-src = "image_data_uri(doc.signature_image)" style = "height: 100px; width: 80px;"/></p>

</t>

<t t-else = "">

</t>

<p style = "margin-right: 100px; text-align: left; border-top: 2px solid black;">

<strong>Approved By:</strong><br/>

<span t-field = "doc.user_id.name"/><br/>

<t t-if = "doc.user_id.function">

<span t-field = "doc.user_id.function"/><br/>

</t>

<span t-esc="context_timestamp(datetime.datetime.now()).strftime('%m/%d/%Y')"/>

</p>

</div>

I have used page-break but no success, still that 'approve by' block is shown in two pages. I just want that div section move into next page with image whenever splitting occur.