Clearing floats and printing with Firefox.

Half of my resume was missing. It was there on the screen, but in print preview and on the printed page reams of experience disappeared. Not ideal.

I discovered that when you use the formatting context to clear floats, firefox treats each printed page as a “box” with the overflow hidden. Elements with overflow: hidden applied will be printed partially or not at all.

.myElement{
  overflow:hidden;
  _overflow:visible;
  zoom:1;
}

The solution I found was to remove the formatting context using an overload in the print style sheet. This meant I needed to simplify the design, but frankly, for print, simplification is appropriate. If it is important that your layout remain exactly the same on the printed page, test overflow:auto instead of hidden.

In print.css :

.myElement{
  overflow:visible;
  /* plus corrections to errors in layout this creates */
}

Perhaps a better float clearing technique is the one employed by YUI grids.css. I don’t think it would have the effect of avoiding wrap around floated elements, so you might be forced to float all your containers.

.myElement:after{
  content:".";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
}

To visualize the problem, open the old version of my resume and then do print preview.

The original technique :


Posted

in

, ,

by

Tags:

Comments

2 responses to “Clearing floats and printing with Firefox.”

  1. Sam Watkins Avatar

    hi there, I have a similar problem with an article I wrote.

    http://sam.ai.ki/co2-and-forests.html

    I want to use ‘float’ to arrange the text into columns, so that the number of columns may vary with the width of the window. It works reasonably well on the screen, but the print preview is typically missing large chunks of text. I think a float element that starts on one page will not be shown on the next page. For the column-based layout, I also want it not to break a column over two pages. I tried

    page-break-inside: avoid;

    for that, but it doesn’t seem to work with floats in firefox yet.

    I’m happy to give $20 to anyone who tells me how to hack around this problem. I’m willing to use javascript if necessary, supposing it gets run separately for print / print previews. My email address is mentioned at the end of the article!

  2. Sam Watkins Avatar

    I hacked around it badly by using a media=’print’ stylesheet, which gets rid of the multi-column layout.