title: Elements are not floating after a page break in print preview or print in Firefox(latest version)
body: <p>I am trying to print multiple document formats, but for some reason in Firefox the format is messed up beyond the first page. I have floating elements and they align correctly in the first page but break on the second page in print preview. I posted the code in jsfiddle and underneath. If you copy the code to your local machine, you can try it and see what I mean. It works fine on Chrome, IE 10, 9 and safari. Unfortunately not Firefox. I was wondering is this a Firefox bug, is there a turn around? I can use a table and it fix the problem but I prefer not to. Help is really appreciated. </p>
  
  <p><a href="http://jsfiddle.net/2xpDP/1/" rel="nofollow">http://jsfiddle.net/2xpDP/1/</a></p>
  
  <pre><code>     .hide { display: none; }
       .left { float: left; }
       .right { float: right; }
       .text-center { text-align: center; }
       .text-left { text-align: left; }
       .text-right { text-align: right; }
  
       .clearfix:before, .clearfix:after { content: ""; display: table; }
       .clearfix:after { clear: both; }
       .clearfix { *zoom: 1; }
       .clear { clear: both; }
       .align-top { vertical-align: top; }
  
       div.page { margin: 0 auto; width: 720px; font-family: Helvetica; font-size: 12px;}
       .invoice h2 { color: #ccc; }
       .invoice-header-top { border-bottom: 2px solid #ccc; padding-bottom: 10px; }
       .invoice-header-top img { width: 300px; height: 125px; }
       .invoice-header-top .formatType { width: 239px; margin-left: 40px; text-align: left; }
  
       @media print {
          div.page {page-break-after: always;}
       }
  
      &lt;div class="page clear clearfix"&gt;
          &lt;div class="invoice clear clearfix"&gt;
              &lt;div class="invoice-header-top clear clearfix"&gt;
                  &lt;div class="left"&gt;
                      &lt;img src=" http://placehold.it/350x150"&gt;&lt;/div&gt;
                  &lt;div class="left formatType"&gt;
                      &lt;h2&gt;INVOICE
                      &lt;/h2&gt;
                  &lt;/div&gt;
                  &lt;div class="right text-left"&gt;
                      &lt;b&gt;Test Data&lt;/b&gt;
                      &lt;br&gt;
                      Test Data&lt;br&gt;
                      Test Data&lt;br&gt;
                      Test Data&lt;br&gt;
                      Test Data&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="page clearfix clear"&gt;
          &lt;div class="invoice clearfix clear"&gt;
              &lt;div class="invoice-header-top clear clearfix"&gt;
                  &lt;div class="left"&gt;
                      &lt;img src=" http://placehold.it/350x150"&gt;&lt;/div&gt;
                  &lt;div class="left formatType"&gt;
                      &lt;h2&gt;INVOICE
                      &lt;/h2&gt;
                  &lt;/div&gt;
                  &lt;div class="right text-left company-info"&gt;
                  &lt;b&gt;Test Data&lt;/b&gt;&lt;br&gt;
                      Test Data&lt;br&gt;
                      Test Data&lt;br&gt;
                      Test Data&lt;br&gt;
                      Test Data&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>