Fixing DIVs That Cause Content Truncation When Printing

Posted July 23, 2007 at 7:00 AM

Tags: HTML / CSS

A client recently called me complaining that their pages weren't printing correctly. This had never been a problem before. But apparently, now that the site has been up for a while and has some good content, the pages stopped printing correctly. After trying it for myself, I was irked to see that indeed, the first page printed but then none of the other pages printed. And, on top of that, the first page didn't even print properly; the first page's content overflowed right into the margin and off the page entirely. And then, nothing after that.

I had never seen this behavior before. After a few hours of Google searching, I didn't quite find the answer, but I found the right path. All suggestions to dealing with this content overflow print problem talked about taking away FLOAT styles and making displays "static" and even trying to put in some MS word "always break after" type of directives. None of that worked for me, but it got me thinking about the display.

Before I talk about the solution, let's see the problem in action. Imagine having a really simple page that has two DIV elements; one to define the width of the page and one to define the content area:

 Launch code in new window » Download code as text file »

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • <html>
  • <head>
  • <title>Print Style Cutoff Overflow Issues</title>
  • <style type="text/css">
  •  
  • div#pagewidth {
  • margin: 0px auto 0px auto ;
  • overflow: hidden ;
  • width: 500px ;
  • }
  •  
  • div#sitecontent {}
  •  
  • </style>
  • </head>
  • <body>
  •  
  • <!-- BEGIN: Page Width. -->
  • <div id="pagewidth">
  •  
  • <!-- BEGIN: Site Content. -->
  • <div id="sitecontent">
  •  
  • <!---
  • Make some really long content so that when we
  • go to print, we will definitely be requiring
  • more than once page.
  • --->
  • <cfloop
  • index="intPara"
  • from="1"
  • to="20"
  • step="1">
  •  
  • <p>
  • Strings of lights above the bed Curtains
  • drawn and a glass of red All I ever get for
  • Christmas is blue Saxophone on the radio
  • Recorded forty years ago All I ever get for
  • Christmas is blue When you play my song,
  • play it slowly Play it like I'm sad and
  • lonely Maybe you can solve my mystery, Wrap
  • me in your arms and whisper You miss me With
  • a man sex is miserable, But the snow is so
  • beautiful All I ever get for christmas is
  • blue It would take a miracle To get me out
  • to a shopping mall All I really want for
  • Christmas is you Let them ring the bells
  • They won't miss us I'll be drinking down
  • your kisses Deep into the night we'll go
  • stealing Underneath the starry ceiling
  • Revealing White lights on the Christmas tree
  • Thank God you are here with me All I ever
  • get for Christmas is blue
  • </p>
  •  
  • </cfloop>
  •  
  • </div>
  • <!-- END: Site Content. -->
  •  
  • </div>
  • <!-- END: Page Width. -->
  •  
  • </body>
  • </html>

Now, if we try to go print this page, we get a really strange content overflow problem:


  
  
  

 
Print Overflow Problem  
 
  
  

Notice that going from page 1 to page 2, the content completely overflows the margins of the page and then does not even proceed onto the second page. No wonder my client was a bit peeved! This is entirely unacceptable.

The problem stems from the nested DIVs, PageWidth and SiteContent. I am not sure why the nesting seems to cause problems, but I know that if I remove the parent PageWidth DIV, the page with the SiteContent DIV alone will print just fine. I think it has something to do with the fact that both elements are block-level elements. A block level element inside of another block level element must have a hard time figuring out when to break because, from the parent element's point of view, there is no "page break" to accommodate. It's only when the parent element itself can wrap nicely that the inner block level element must also break nicely (... this is all theory here folks, but it's how I got to my solution).

So, to overcome this problem, we simply need to change the way the parent DIV, PageWidth, displays. Using a print-only style sheet definition (as denoted by the media="print" attribute in the STYLE tag), we will change the display of PageWidth to be "inline" when in the context of a print job. A display of "inline" will force the PageWidth DIV tag to act much like a SPAN or STRONG element that, by its nature, will naturally wrap from page to page when required.

 Launch code in new window » Download code as text file »

  • <head>
  • <title>Print Style Cutoff Overflow Issues</title>
  • <style type="text/css">
  •  
  • div#pagewidth {
  • margin: 0px auto 0px auto ;
  • overflow: hidden ;
  • width: 500px ;
  • }
  •  
  • div#sitecontent {}
  •  
  • </style>
  •  
  • <!-- Print styles. -->
  • <style type="text/css" media="print">
  •  
  • div#pagewidth {
  • display: inline ;
  • }
  •  
  • </style>
  • </head>

Because the STYLE tag has the media = "print" attribute, we don't have to worry about those styles affecting the run-time look and feel of the page. This is only for print scenarios. Having this in place, when we go to print:


  
  
  

 
Print Overflow Problem Fixed With Inline DIV Display  
 
  
  

... you will see that all the content wraps appropriately. Not only that, since we changed the DIV to be an inline element, it means that all Width rules on it no longer apply (most inline elements don't like have explicit widths). This is actually a good thing since the print version of a page probably shouldn't have any set height and width, other than the layout of the print paper itself.

Note: Content of page is composed of lyrics from the Over The Rhine song, All I Ever Get For Christmas Is Blue - a fantastic song!

Download Code Snippet ZIP File

Comments (14)  |  Post Comment  |  Ask Ben  |  Permalink  |  Other Searches  |  Print Page



Keep your Web site content fresh and your overhead costs low with Savvy Content Manager

Reader Comments

Ben:
Just glancing at it, I would guess that what is happening has to do with the overflow hidden definition...
If your outside div is set to 500px wide, and the only thing inside it are div's, what is the reason for having the overflow definition at all?
In any case... print stylesheets are geat tools! I always define one to get rid of things such as content navigation (side menu's) and other items that interfere with the actual content.

Thanks for the post!

Posted by Ken Auenson, II on Jul 23, 2007 at 8:19 AM


@Ken,

The overflow: hidden is meant to stop the page from breaking if someone puts in inappropriate content (ie. pasting a table from MS word that is like 900px wide). This example doesn't demonstrate that need very much, but if you think of this being part of a multi-column layout of a content management system, then the overflow: hidden will be much more important.

And yes, you are correct about removing the overflow: hidden. If I remove that for the Print style sheet, it works as well. Just another way to alter the DIV in someway for printing. I like the "inline" rule though because it will also get rid of height / width definitions (which don't really work well inline elements). But certainly, two correct answers to the same problem.

Posted by Ben Nadel on Jul 23, 2007 at 8:36 AM


I had the same Firefox problem with page truncation and found I had an overflow:hidden in a nested div. However, setting display:inline did not have an effect. Changing to overflow:visible for print style though fixed my problem.

Posted by Glenn Engel on Sep 24, 2007 at 8:05 PM


Hey I'd just like to thank you for taking the time to write this article. You helped me solve a problem I was trying to fix.

So thank you very much and all the best.

Keep up the great work.

Richard

Posted by Richard Tanda on Dec 18, 2007 at 5:59 AM


@Richard,

Glad I could help. Although, I just came across a situation with Internet Explorer 7 where this didn't fix the problem! Same page works great in IE6 and FireFox, but noooo, IE7 had to be different :(

Posted by Ben Nadel on Dec 18, 2007 at 7:12 AM


I'm having this problem since a week ago. I've been searching trough the web for several days, finding "very confusing" solutions that didn't worked.
Keep taking a minute for explaining the error clearly, that's more important that knowing the solution. When I read why was happening, I understood what should I do.
Thanks for being so precise and concise, that is what people need, you are my man.

Posted by Leandro Falanga on Feb 13, 2008 at 12:47 PM


@Leandro,

Glad to help. Since posting this, I have run into some situations where this didn't help in IE7. But, for the most part, this type of fix seems to work nicely.

Posted by Ben Nadel on Feb 13, 2008 at 12:51 PM


Thanks, great tip.

Posted by Andrew Mager on Feb 20, 2008 at 4:48 PM


Thanks a lot for the great knack.
I am trying to print out some contents hidden in the div tag that is set with overflow property. Tried many times but failed always. Finally I find you blog and it works now. Great stuff.

Posted by itpretty on Apr 21, 2008 at 3:43 AM


I had a similar issue but when I tried applying the method on this page I could get it working fine in IE 7, but then everything was mangled in Firefox.

I finally noticed that whoever created the print.css placed a style for the main containing div (called #uber) and gave it a width of auto. I removed this line and it cleared-up my issue in IE and FireFox.

I'm not a CSS guru, so I have no idea throwing a width of auto on the main container div would do this, but the actual content div was nested within (3 or 4 levels) so this ultimately affected my content when printing.

I'd spent all my time focusing on the styles for the content div not thinking that the issue could have come from one of its ancestor divs.

Can we go back to text-based browsers? ;)

Posted by Jay on May 8, 2008 at 7:23 PM


@Jay,

I hear you man. When I started testing in IE7, this whole task became even harder! I was so irritated to find out that things that would not print ok in IE6 were messing up in IE7. Arrrg!

Posted by Ben Nadel on May 8, 2008 at 7:26 PM


Thanx a bunch, I can't believe I didnt tried display inline with my css, LOL save me

Buddha Soumpholphakdy
Downstairz Entertainment

Posted by Buddha Soumpholphakdy on May 21, 2008 at 3:48 PM


Hey Ben,
This fix worked great in Firefox 3, but like you said, not in IE7.
Have you had any luck yet in IE7?

Posted by Ted Graf on Jun 23, 2008 at 3:25 PM


@Ted,

It works sometimes but not others. I guess it's just one of the tools you can use when trying to fix printing problems, but it's not the end-all, be-all.

Posted by Ben Nadel on Jun 24, 2008 at 1:18 PM


Post Comment  |  Ask Ben


Home   |   Web Log   |   ColdFusion   |   Projects   |   Resume   |   Job Form   |   Search   |   Contact
Epicenter Consulting - Custom Software Solutions for Business Evolution HostMySite.com - The Leader In ColdFusion Hosting