title: How to print HTML elements as pages in Safari?
body: <p>The following code should result in each <code>div</code> being printed as a separate page. Each <code>div</code> is set to a <code>width</code> and <code>height</code> of <code>100%</code>. This HTML page prints as three pages in <strong>all browsers other than Safari 5.6.1</strong>. How can I fix it in Safari?</p>
  
  <p>Please copy the following code to new file and test it:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;style&gt;
      html,
      body {
        height: auto;
        margin: 0;
        padding: 0;
      }
      input {
        border: 2px solid red;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div style="background-color:red; position:  relative; width:100%;height:100%;"&gt;
      &lt;input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 1.2%;left:1.2%"&gt;
      &lt;input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 6.4%;left:1.3%"&gt;
      &lt;input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 10.4%;left:1.3%"&gt;
    &lt;/div&gt;
    &lt;div style="background-color:green; position:  relative; width:100%;height:100%;"&gt;
      &lt;input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 1.2%;left:1.2%"&gt;
      &lt;input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 6.4%;left:1.3%"&gt;
      &lt;input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 10.4%;left:1.3%"&gt;
    &lt;/div&gt;
    &lt;div style="background-color:red; position:  relative; width:100%;height:100%;"&gt;
      &lt;input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 1.2%;left:1.2%"&gt;
      &lt;input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 6.4%;left:1.3%"&gt;
      &lt;input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 10.4%;left:1.3%"&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>