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 printe

Answer 1

It sounds like your image is just too big. Since the image is custom-sized, why not set

img { height: 100%; }

instead of width? That would at least ensure that it didn't spill over to a second page.

Bear in mind also that printers are more variable than browsers. You may be able to eke out every last inch of space on your printer, but someone else's might have significantly different print margins and ruin all your hard work.

Answer 2

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