title: @media print div: How to solve overlapping page text on pages?
body: <p>I found some answers for this question, but that doesn't apply for my css.
  Currently i want to print into A4 landscape. I create each div as a page, which has css and print css as follow:</p>
  
  <pre><code>.page {
      background-color: #FFF;
      margin: 10pt 0pt 10pt 0pt;
      width: 800pt;
      height: 600pt;
      padding: 22pt;
  }
  </code></pre>
  
  <p>and </p>
  
  <pre><code>@media print {
      .page {
          height: 210mm;
          width: 297mm;
          size: A4;
          bottom: 3em;
      }
  </code></pre>
  
  <p>JSfiddle <a href="https://jsfiddle.net/vc5L29m9/" rel="nofollow">https://jsfiddle.net/vc5L29m9/</a> 
  but the divs in each pages overlapping each others and tend to move to the top.
  What css am i missing from the div? </p>