IE7 CSS Float causing content to overflow when printing

Question

When attempting to print the following web page in IE7 (or IE8 compatibility mode), some content (the bottom two questions) is truncated. You can view the issue in Print Preview.

http://www.testdesigner.com/tests/print.jsp?testId=4097

Removing the float in the following css block found in printTestTwoColumns.css will fix the issue, but also remove the double column formatting.

.question { float: left; width: 44%; padding: 0; margin-right: 0; }

It's important to note that the HTML in the URL above is dynamically generated and the problem exists with all types of content, including pure text (no images). The content always overflows off the page.

Short of changing the markup to a table based layout, does anyone have a possible solution?

Answer 1

with FLOAT IE tends to add a addition 10PX padding even though you are stating padding:0.

Try adding display:inline ie

.question { float: left; width: 44%; padding: 0; margin-right: 0; display:inline }

Hope this helps.

Answer 2

Try adding a print stylesheet that uses a much simpler layout designed for narrow printing on paper. You probably won't need any floats at all.