title: Different page orientation for printing HTML
body: <h2>Code:</h2>
  
  <p>I try to make the following simple HTML page work:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;style type="text/css"&gt;     
      @media print
      {               
        @page port { size: portrait; }
        .portrait { page: port; }
  
        @page land { size: landscape; }
        .landscape { page: land; }                
  
        .break { page-break-before: always; }
      }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="landscape"&gt;
        &lt;p&gt;This is a landscape page.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="portrait break"&gt;
        &lt;p&gt;This is a portrait page.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h2>Question:</h2>
  
  <p>I want to print the first div's content onto the first page, with landscape orientation, and the second one with portrait mode. However, all browsers (Chrome, Opera, Safari, IE10) print two portrait pages. Did I miss something or do none of the browsers support this kind of feature yet? In the latter case is there any alternative to achieve that result?</p>