title: CSS Print Layout - Printing on a Single Page
body: <p>I'm badly stuck and the SO archives aren't helping me. Maybe I'm looking in the wrong place. Here's the short story:</p>
  
  <ul>
  <li>I've got a view that I need to get printed on a single full page. I can't have a second page and I need it to be as large as possible on the page. </li>
  <li>Solution has to be reasonably cross-browser compatible (IE9+, Safari, Chrome, FF).</li>
  <li>I already have a PDF solution, but I need a plain vanilla print solution as well.</li>
  <li>The page is built with Bootstrap, but I've overridden most of the classes for Print.</li>
  </ul>
  
  <p>The structure of the HTML page is as follows. I dropped in some in-line CSS in order to customize some of this information. </p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="span16"&gt;
  
        &lt;style type="text/css" media="all"&gt;
          @media print {
            html, body {
              margin: 0;
              padding: 0;
              background: #FFF; 
              font-size: 9.5pt;
            }
            .container, .container div {
              width: 100%;
              margin: 0;
              padding: 0;
            }
            .template { overflow: hidden; }
            img { width: 100%; }
          }
        &lt;/style&gt;
  
        &lt;div class="template_holder"&gt;
          &lt;div class="template"&gt;
            &lt;img src="some_big_image"&gt;
            &lt;div&gt;
              [PLAIN TEXT IN HERE, POSITION:ABSOLUTE OVER THE IMAGE]
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I realize it's somewhat poor form to include in-line CSS here, but it has to override a bunch of other CSS that came before it for various reasons. I could pull it back out, but the gist of it is this. When I print, I get something that looks right, plus an extra second page. When I shrink the image down, everything is ok, but I need the image to fill the DIV. </p>
  
  <p>I thought setting width to 100% was the issue, but I made sure the image aspect ratio was smaller than the page (even with any margins). Basically, the image at full width should not cause a page break. What am I doing wrong &amp; what do I need to change? Any help is appreciated...</p>