title: Enforce Print Page Breaks with CSS
body: <p>I have a page that basically displays all work orders for a given day. I have tried to create the HTML so that I can use page-break-after: always to create a logical print page break and continue on. However when the user prints the page, there are often overlaps, multiple work orders on the same page, etc. I simply want to enforce a hard page break that Firefox, Safari, and Chrome will listen to.</p>
  
  <p>My HTML looks like this</p>
  
  <pre><code>&lt;div class="WOPrint"&gt;
      &lt;div class="WOHeader"&gt;
          &lt;h1&gt;Header stuff&lt;/h1&gt;
      &lt;/div&gt;
      &lt;!-- content --&gt;
  &lt;/div&gt;
  &lt;div class="WOPageBreak"&gt;&lt;/div&gt;
  &lt;div class="WOPrint"&gt;
      &lt;div class="WOHeader"&gt;
          &lt;h1&gt;Header stuff&lt;/h1&gt;
      &lt;/div&gt;
      &lt;!-- content --&gt;
  &lt;/div&gt;
  &lt;div class="WOPageBreak"&gt;&lt;/div&gt;
  &lt;!-- repeat N times --&gt;
  &lt;div class="WOPrint"&gt;
      &lt;div class="WOHeader"&gt;
          &lt;h1&gt;Header stuff&lt;/h1&gt;
      &lt;/div&gt;
      &lt;!-- content --&gt;
  &lt;/div&gt;
  &lt;div class="WOPageBreak"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and my CSS is basically like so:</p>
  
  <pre><code>.WOPrint
  {
      max-width: 100%;
      padding-bottom: 3em;
  }
  
  .WOHeader
  {
      display: block;
      page-break-inside: avoid;
  }
  
  .WOPageBreak
  {
      height: 1px;
      width: 100%;
      float: left;
      page-break-after: always;
      display: block;
  }
  </code></pre>
  
  <p><strong>EDIT</strong>
  In a hackish attempt I have played around with setting the WOPrint class min-height. Changing it to 9 inches seems to give me enough margin room for printing from all Safari, Firefox, and Chrome when I have it set to a standard US paper size. This is certainly not the way I would like to fix it, but I also don't want to have to render to PDF.</p>
  
  <pre><code>.WOPrint
      {
          max-width: 100%;
          padding-bottom: 3em;
          min-heihgt: 9in
      }
  </code></pre>