CSS Print Layout - Printing on a Single Page

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...

Answers


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;}
}

Need Your Help

Filter actor touch from screen touch

android libgdx actor stage scene2d

I have a game with a virtual joystic and I also implement ontouch and onDraged to move the camera. I want the camera to stand still and stop moving/zooming when the touch belongs to virtual joystic...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.