Wednesday, July 14, 2010

overflow:hidden breaks printing

As we know elements which contain only floated elements often have no dimensions of their own (or dimensions of 0 if you prefer) and this can wreak havoc with the flow of your page.

On quick way around this is to apply overflow:hidden to the container, for whatever reason this will cause it to wrap cosily around it's children. I use this a lot when dealing with thumbnail galleries (a bunch of fixed-with elements floated left so they will align into nice columns no matter the width of the container), or anywhere else that a content area may wind up wit a floated element at the end (eg code inserted from a CMS).

Unfortunately I discovered yesterday (or more pointedly a client did) that overflow:hidden also applies to the printed page (at least in Firefox, I haven't tested extensively). The print routine will do it's utmost to fit all of the content in the element on one page, even starting a new page for the purpose, but will not insert another page break until it is finished. For long sections of content this means being cut off.

So it's back to empty elements with clear:both in the template or extensive use of clearfix for now.

0 comments: