Как динамически добавлять разрыв страницы, если печать достигает второй страницы

У меня проблема с моей HTML-описанием продукта.

Когда на странице выбрано достаточно продуктов, чтобы составить вторую страницу, верх второй страницы испачкается новым продуктом, стиль которого испорчен.

CSS я пробовал так далеко

 @media print{

        #packingPrint {
            page-break-after: always;
        }
    }

div, содержащий информацию, которую необходимо распечатать.

  <div style = "page-break-after: always;">
        <!--END: pagebreak-->
        <section id = "packingPrint" style = "font-family:verdana,helvetica,sans-serif" ;>
            <!------ START: Confirmation ------>
            <!--START: order_details-->
            <div class = "customerInfoBlock" style = "border-bottom: solid;border-width: 1px;">
                <!--start customer info block-->
                <div class = "left-col">
                    <!--START: invoicelogo-->
                    <div class = "invoice-logo"><img src = "../[invoicelogo]" alt = "[company]" /></div>
                    <!--END: invoicelogo-->

                </div>
                <!--end customer info block-->
                <!--start invoice info block-->
                <div class = "right-col">
                    <div class = "orderNumber">
                        <div class = "label">Order Number #:</div>
                        <div class = "text">[invoicenum_prefix][invoicenum]
                            <!--START: shipmentsuffix--><span style = "display:none;">-[shipment_suffix]</span>
                            <!--END: shipmentsuffix-->
                        </div>
                        <div class = "clear"></div>
                         <div class = "label">Order Date:</div>
                    <div class = "text">[odate_month]/[odate_day]/[odate_year]</div>
                    <div class = "clear"></div>
                    </div>
                </div>
                <!--end invoice info block-->
                <div class = "clear"></div>
            </div>
            <div class = "billingBlock">
                <!--start billing block-->
                <div class = "left-col">
                    <p style = "font-size:20px; text-decoration: underline;"><strong>SHIPPING ADDRESS</strong></p>

                    <p style = "font-size:18px">[oshipzip]</p>

                    <div class = "spacer"></div>

                    <p style = "font-size:18px">[oshipfirstname] [oshiplastname]</p>
                    <!--START: oshipcompany-->
                    <p style = "font-size:18px">[oshipcompany]</p>
                    <!--END: oshipcompany-->
                    <p style = "font-size:18px">[oshipaddress]</p>
                    <!--START: oshipaddress2-->
                    <p style = "font-size:18px">[oshipaddress2]</p>
                    <!--END: oshipaddress2-->
                    <p style = "font-size:18px">[oshipcity]</p>





                </div>
                <!--end billing block-->
                <!--start shipping block-->
                <div class = "right-col" style = "max-width: 300px">




                    <div class = "deliveryBox">
                        <div class = "text"><span style = "color: #ff0000;"><img src = "/assets/images/shipping1.png" width = "40" height = "40" style = "padding-right:5px; margin-bottom: -10px;">[oshipmethod]</span> </div>
                    </div>

                    <div class = "spacer1">
                        <div class = "text"><img src = "/assets/images/Weight1.png" width = "25" height = "25" style = "padding-right:5px;">Weight:[totalweight]kgs</div>
                    </div>

                    <div class = "spacer1">
                        <div class = "text">
                            <p style = "font-size:15px"> <img src = "/assets/images/email1.png" width = "25" height = "25" style = "padding-right:5px;">[oemail]</p>
                        </div>
                    </div>

                    <div class = "spacer1">
                        <div class = "text">
                            <p style = "font-size:15px"><img src = "/assets/images/phone1.png" width = "25" height = "25" style = "padding-right:5px;">[ophone]</p>
                        </div>
                    </div>
                    <div class = "clear"></div>

                </div>
                <!--end shipping block-->
                <div class = "clear"></div>
            </div>
            <div class = "shippingInfoBlock" style = "width:100%;">
                <!--START: shipping_info-->

                <div class = "invoiceTable">
                    <div class = "titles2" style = "padding-top: 15px;padding-bottom: 15px;">

                        <div class = "invoice-qty">Qty</div>

                        <div class = "invoice-loc">Loc</div>
                        <div class = "invoice-items">Items</div>
                         <div class = "invoice-ais">2loc</div>
                        <div class = "invoice-cus">Stock</div>
                        <div class = "invoice-id">Item ID</div>


                        <div class = "clear"></div>
                    </div>
                    <!--START: items-->
                    <div class = "row" style = "border-bottom: solid;border-width: 1px;padding-top: 15px;padding-bottom: 15px;">
                        <div class = "invoice-qty">[numitems]</div>
                        <div class = "invoice-loc">[warehouse_location]</div>
                        <div class = "invoice-items">[itemname]</div>
                        <!--START: warehouse_location-->


                         <div class = "invoice-ais" style = "text-align:center;">[warehouse_aisle]</div>
                        <div class = "invoice-cus" style = "text-align:center;">[warehouse_custom]</div>
                        <div class = "invoice-id" style = "text-align:center;">[id]</div>



                        <div class = "clear"></div>
                        <!--END: warehouse_location-->
                    </div>


                </div>
                <!--END: items-->
                <div class = "orderDetailsBlock">
                    <div class = "left-col">
                        <!--START: ocomment-->
                        <div class = "ocomment" >
                            <strong>Order Comments:</strong>
                            <p class = "oCommenting"><strong><span class = "commentsOrder" style = "color: #ff0000;">[ocomment]</span></strong></p>
                        </div>
                        <!--END: ocomment-->

                    </div>
                </div>
                <div class = "clear"></div>
            </div>

            <p id = "imagePick"><img src = "https://www.plasticpipeshop.co.uk/assets/images/Picked.png" alt = "Picked By" align = "right" width = "250" height = "150" /> </p>

            <!------ END: Confirmation ------>
            <div class = "clear"></div>
        </section>
    </div>

Картинка выпуска показывая верх второго и низ первого