CSS Floats Breaking When Printing

[spoonybard]

Hi Everyone,

I have a tableless website design and I am trying to add the feature to print the middle column content on one of my pages. The information that is being displayed is a two column layout with a float left and a float right. When I view the page in Print Preview, the float right column breaks to the next line.

I haven't been able to come up with a viable solution for this problem. I've tried creating my own stylesheet for printing and was able to format everything but this issue. I was able to remove the main left and right columns of the page as well as format the header and footer. I've tried removing the floats in the stylesheet, just changing them to float left, setting display equal to table, etc... but nothing seems to work for the information being displayed in the main middle column.

Any help you can provide would be greatly appreciated.

Thanks.

[spoonybard]

I found a solution that works for me. I did the following:

• Had the div that floats right to float left
• Had the div that floats left to clear left and have a page-break-before: always
• Had the div that floats right to page-break-after: always
• Added the width for the float left and float right

This is only needed in IE because IE ignores the width's you set in a div and puts in width: 100%.

Hope this helps anyone else looking for an answer on this issue.