CSS Print Layout - Printing on a Single Page

Question

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:

• 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.
• Solution has to be reasonably cross-browser compatible (IE9+, Safari, Chrome, FF).
• I already have a PDF solution, but I need a plain vanilla print solution as well.
• The page is built with Bootstrap, but I've overridden most of the classes for Print.

The structure of the HTML page is as follows. I dropped in some in-line CSS in order to customize some of this information.

<div class="container">
  <div class="row">
    <div class="span16">

      <style type="text/css" media="all">
        @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%; }
        }
      </style>

      <div class="template_holder">
        <div class="template">
          <img src="some_big_image">
          <div>
            [PLAIN TEXT IN HERE, POSITION:ABSOLUTE OVER THE IMAGE]
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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.

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 & what do I need to change? Any help is appreciated...

Answer 1

I think the frustration with this detail of CSS is that the answer has to be tailored to my own project. Thanks to @blahdiblah and other for suggestions. A mix of solutions led to near-perfect results, though of course IE still gives me problems...

It had to do with a hard reset of all padding/margin styles and then lots of !important markers for padding, width, height, etc. Basically I filled up the page with height and then dropped in 100% wide objects. The result is maximum coverage on an 8.5x11 page with zero spillover to a second page.

@media print {
  * { margin: 0 !important; padding: 0 !important; }
  #controls, .footer, .footerarea{ display: none; }
  html, body {
    /*changing width to 100% causes huge overflow and wrap*/
    height:100%; 
    overflow: hidden;
    background: #FFF; 
    font-size: 9.5pt;
  }

  .template { width: auto; left:0; top:0; }
  img { width:100%; }
  li { margin: 0 0 10px 20px !important;}
}