DomPDF layout breaks in PDF

Question

I have used DOMPDF in PHP to generate PDF file. The layout seems perfect. But only when there is a page change. The layout breaks a little shifting content on right div to left side. I guess The dompdf reads content line by line and it gets an empty space in new page on left side thus shifting right part to left. Have help to fix this ? Here is my DOMPDF CODE

$blockHTML = "";
$blockHTML .= 
'<div style="color:rgb(23, 23, 78);font-family:proximanova;letter-spacing:1px;font-size:12px;">
    <div style="padding-bottom:10px;border-bottom:'.$border.'"><!--header-->
        <img src="'.$logoImg.'" width="65">
    </div>
    <div style="margin-top:10px;">
        <div style="text-align:center;padding:10px;border-bottom:'.
            $border.'font-weight:bold;font-size:1.4em;">
            <span>"Favorite Italian Restaurants in Los Angeles"</span>
        </div>
    </div>
    <div style="margin-top:5px;">
        <div style="text-align:center;padding:10px;">
            <span style="color:rgb(179,179,179);">Collection Created By: </span>
            <span>&nbsp;Vivek Tankaria</span>
        </div>
    </div>
    <div style="margin-top:5px;">
        <div style="text-align:center;display:inline-block;width:200px;margin:0 auto;">
            <img src="'.$poiMarker.'" width="12" />
            <span style="padding:0px 10px;height:15px;line-height:15px;">
                48 Locations Bookmarked
                </span>
        </div>
    </div>';
for($i=0;$i<20;$i++){
    $blockHTML .= '<div style="margin-top:10px;border-top:'.$border.'">
        <div style="width:100%;padding:10px 2.5%;">
            <div style="display:inline-block;width:25%;">
                <div>
                    <img src="'.$data.'" style="width:100%;height:auto;" />
                </div>
            </div>
            <div style="display:inline-block;width:46%;padding:0 2%;">
                <div style="width:100%;">
                    <span style="padding:2px 0;border-bottom:'.
                        $border.';font-weight:bold;width:70%;display:inline-block;">
                        Venue Name Comes Here
                    </span>
                    <span>
                        <img style="padding:2px;" src="'.$star.'" width="12" />
                        <img style="padding:2px;" src="'.$star.'" width="12" />
                        <img style="padding:2px;" src="'.$star.'" width="12" />
                        <img style="padding:2px;" src="'.$star.'" width="12" />
                        <img style="padding:2px;" src="'.$star.'" width="12" />
                    </span>
                </div>
                <div style="width:100%;">
                    <span style="padding:5px 0;width:70%;display:inline-block;">
                        <i>"Venue Caption Comes Here"</i>
                    </span>
                    <span style="padding:5px 0;display:inline-block;text-align:right;font-size:1.2em;width:28%;">
                        $$$
                    </span>
                </div>
                <div style="width:100%;">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                    Lorem Ipsum has been the industry standard dummy text ever since the 1500s, 
                    when an unknown printer took a galley of type and scrambled it to make a type
                </div>
            </div>
            <div style="display:inline-block;width:25%;">
                <div>
                    <img src="'.$data.'" style="width:100%;height:auto;" />
                </div>
            </div>
        </div>
        <div style="width:100%;padding:10px 2.5%;">
            <div style="display:inline-block;width:22%;">
                <span style="display:inline-block;width:10%;padding:0 2%;"><img src="'.$call.'" width="15" /></span>
                <span style="display:inline-block;width:90%;">(123) 456-7890</span>
            </div>
            <div style="width:1%;height:20px;display:inline-block;border-right:'.$border.'"></div>
            <div style="display:inline-block;width:18%;padding:0 4% 0 2%;">
                <span style="display:inline-block;width:10%;padding:2px 6%;"><img src="'.$website.'" width="18" /></span>
                <span style="display:inline-block;width:90%;">www.uvwxyz.com</span>
            </div>
            <div style="width:1%;height:20px;display:inline-block;border-right:'.$border.'"></div>
            <div style="display:inline-block;width:18%;padding:0 2%;">
                <span style="display:inline-block;width:10%;padding:2px 6%;"><img src="'.$email.'" width="18" /></span>
                <span style="padding:0 2%;display:inline-block;">useremail @uvwxyz.com</span>
            </div>
            <div style="width:1%;height:20px;display:inline-block;border-right:'.$border.'"></div>
            <div style="display:inline-block;width:22%;padding:0 2%;">
                <span style="display:inline-block;width:10%;padding:0 2%;"><img src="'.$address.'" width="12" /></span>
                <span style="display:inline-block;width:90%;">123, Street One, Road Rd, Location (w), City - 123456</span>
            </div>
        </div>
       </div>';
}
$blockHTML .= '</div>';

$this->load->library('dompdf_gen');
// Convert to PDF
$this->dompdf->set_paper("A4");
$this->dompdf->load_html($blockHTML);
$this->dompdf->render();
$this->dompdf->stream("welcome.pdf",array("Attachment"=>0));

Attaching Image for reference

Answer 1

When moving to a new page dompdf essentially starts from scratch when determining the layout. Since that's a relatively small amount of content you might try styling it with page-break-inside: avoid; to prevent breaking those elements independently.