title: Print CSS in Chrome - Page Size and Element Size in Inches
body: <p>I am working on a print style sheet in Chrome.  It works properly in Firefox and IE, but when I try to print the following page in Chrome:</p>
  
  <p><a href="http://jsfiddle.net/htveL/2/" rel="nofollow">http://jsfiddle.net/htveL/2/</a></p>
  
  <p>It prints as though the page is 8" x 10.5" instead of 8.5" x 11".  For example, the two badges are 4" each, but they take up the full width of the page.  They should have a .5" gap on the right side of the page.</p>
  
  <p>My goal is to print two badges per page, each 4" wide and 2" tall.  I would like the badges to be 7" from the top of the page and left aligned.</p>
  
  <p>The .top and .bottom classes are there to show me where the top and bottom of each page is.  The .bottom class should be across the bottom of each page, but it appear .5" onto the next page.</p>
  
  <pre><code>&lt;div class="book"&gt;
      &lt;div class="page"&gt;
          &lt;div class="top"&gt;test&lt;/div&gt;&lt;div class="bottom"&gt;bottom&lt;/div&gt;
          &lt;div class="badge"&gt;A&lt;/div&gt;&lt;div class="badge"&gt;B&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="page"&gt;
          &lt;div class="top"&gt;test&lt;/div&gt;&lt;div class="bottom"&gt;bottom&lt;/div&gt;
          &lt;div class="badge"&gt;A&lt;/div&gt;&lt;div class="badge"&gt;B&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="page"&gt;
          &lt;div class="top"&gt;test&lt;/div&gt;&lt;div class="bottom"&gt;bottom&lt;/div&gt;
          &lt;div class="badge"&gt;A&lt;/div&gt;&lt;div class="badge"&gt;B&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is the CSS:</p>
  
  <pre><code>@page {
      size: 8.5in 11in;
      margin: 0;
  }
  body {
      margin: 0;
      padding: 0;
  }  
  .page {
      height: 11in;
      position: relative;
      margin: 0;
      page-break-after: always;
      -webkit-region-break-inside: avoid;
  }
  .top {
      border: 1px solid black;
      width: 100%;  
      top: 0px;
  }
  .bottom {
      border: 1px solid black;
      width: 100%;
      position: absolute;
      bottom: 0px;
  }
  .badge {
      position: absolute;
      border: 1px solid black;
      display: inline-block;
      top: 8in;
      width: 4in;
      height: 2in;
      margin: 0 0 0 0;
      padding: 0px;
  }
  .badge + .badge {
      left: 4in;
  }
  </code></pre>
  
  <p>Thanks in advance,
  Todd</p>