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

It's July 2014, and as of today doing float: none; for all parent elements is what worked for me:

@media print {
  table {float: none !important; }
  div { float: none !important; }
  .page-break { page-break-inside: avoid; page-break-before: always; }
  .dont-print { display: none; }  
}

This solution works on Firefox, Chrome and Safari. I have the !important in there because I'm using Bootstrap, and bootstrap does a float: left by default on divs.