title: A4 page like layout in html
body: <p>I am working on small web based application where user is presented 2-3 page long report which can be printed as PDF. I looked at different solutions on <a href="https://stackoverflow.com/questions/20927182/simulate-a4-page-in-html">stackoverflow</a> / internet and found somewhat working solution to printing side (contents are printed with extra margins but i need to work on that to fix it) my current problem is i am not able to display html content in browser with page like layout. I am able to show 1st page with A4 size but as soon as content goes beyond 1 page it appears as if it printed outside page, you can check the images below</p>
  
  <ol>
  <li><p>How page is shown in Browser
  <a href="https://i.stack.imgur.com/RojEK.png" rel="noreferrer"><img src="https://i.stack.imgur.com/RojEK.png" alt="enter image description here"></a>  </p></li>
  <li><p>How it's print preview look like
  <a href="https://i.stack.imgur.com/SauzA.png" rel="noreferrer"><img src="https://i.stack.imgur.com/SauzA.png" alt="enter image description here"></a></p></li>
  </ol>
  
  <p>Here is the CSS</p>
  
  <pre><code>.A4 {
     background: white;
     width: 21cm;
     height: 29.7cm;
     display: block;
     margin: 0 auto;
     padding: 10px 25px;
     margin-bottom: 0.5cm;
     box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
  }
  
  @media print {
  .page-break { display: block; page-break-before: always; }
  size: A4 portrait;
  } 
  
  @media print {
   .noprint {display:none;}
   .enable-print { display: block; }
  }
  </code></pre>
  
  <p>I am trying to solve below problems,</p>
  
  <ol>
  <li>Would love if all the report is shown with page like layout (additionally, if i can show pages in horizontal pagination instead of long vertical page)</li>
  <li>No padding issues while printing, what you see is printed!</li>
  </ol>