title: Mixed Portrait and Landscape Pages in Print CSS
body: <p>I have a report that I want to print using CSS such that the first page is landscape and the second page is portrait.  When I do this, the first page is fine, but the second page looks like a landscape page cropped into a portrait frame.  That is, when centering text, it puts the midpoint at 5.5 inches (on 8.5x11 letter paper) and the page will break at only 8.5 inches high:</p>
  
  <p><img src="https://i.stack.imgur.com/q4je9.png" alt="Screenshot of Print Preview"></p>
  
  <p>I can cheat by giving the second-page div a width of 75%.  This gets the text centered and everything formatted correctly, but the page content still cuts off at 8.5in.  Messing with the height will do nothing, since that will just continue to wrap to a new page.</p>
  
  <p>I only need this to work in Google Chrome for right now, since this is special-purpose and not public use.</p>
  
  <p>Here is my test code:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  
  @media print {
  body { margin: 0; text-align: center; }
  
  @page {
      margin: 0.1in 0.5in 0.1in 0.5in;
      size: letter portrait;
  }
  
  @page :first {
      margin: 0.1in 0.5in 0.1in 0.5in;
      size: letter landscape;
  }
  
  #firstpage { page-break-after: always; }
  
  #secondpage { width: 75%; }
  
  }
  &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="firstpage"&gt;
  &lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="secondpage"&gt;
  &lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;&lt;p&gt;this is a test case&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>