page-break-* doesn't work on Google chrome

Question

I just like the divs under .wp_left_col div be placed in separate pages. This is my css code.

.wpi_left_col > div {         


        

Answer 1

So, after some frustration, I found a solution. It's a hack, but Chrome doesn't support page breaks properly, so.. You have to set all of the parent elements to explicitly float: none. In this example, I'm printing tabbed content.

    

        

            

                
print page 1
                
print page 2
                
print page 3
            
        
    

Then your CSS looks similar to this.

html, body, .main-content, .tabs, .tabbed-content { float: none; }

.tab {
    display: block; /* unhide all tabs */
    break-before: always;
    page-break-before: always;
}