Test case: IE combination float bug

Below is a three-column layout constructed using floats and negative margins (so that correct source-order can be maintained for non-css user agents). It's built using em and % so that it the layout will resize according to the user's text-size preferences. IE6/Windows suffers from a combination of bugs when rendering this layout:

The fix for the first was simple: Add display: inline; to the CSS for the floated columns (see partially fixed example). However, the rendering was still incorrect, except in certain hard-to-reproduce circumstances.

I eventually figured it out - IE was incorrectly calculating the margins for the floated columns: Rather than basing them on the width of their parent element (<div id="TemplateCell">), it was calculating them based on the width of the window. The fix was to add another div that wraps around <div id="TemplateCell">, and re-state the width there: See the final fixed version.

The corrected version has been tested successfuly against Internet Explorer 5.0, 5.5 and 6.0 for Windows and Mozilla Firefox 2.0. There are some slight layout issues (gaps between columns) in Opera 9.02.

Test Case

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut laoreet, eros at vulputate aliquam, ante elit tempor elit, adipiscing viverra urna turpis sit amet mauris. Nulla placerat fringilla augue. Curabitur turpis. Sed vulputate urna in elit. Quisque molestie elit a libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla pede erat, iaculis nec, ultricies in, consectetuer eget, libero. Donec id lacus non pede aliquet fermentum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vel neque. Proin ultrices mattis dui. Vestibulum quam urna, mollis ut, sodales non, blandit ac, felis. Cras tortor ipsum, bibendum quis, venenatis a, venenatis nec, sapien. Nam pretium feugiat augue. Nullam nulla tortor, dapibus et, lobortis eu, fermentum et, pede. Nulla vehicula euismod felis. Integer vestibulum varius mauris. Vestibulum ultrices vestibulum enim. Nam consequat, arcu ac rhoncus placerat, diam arcu posuere ligula, et egestas risus dolor sed nisl.

Fusce accumsan. Proin et sem. Ut tincidunt. Etiam a massa. Sed elit tellus, aliquam non, sagittis eleifend, adipiscing at, tortor. Nam diam. Nullam sapien dui, lacinia nec, feugiat gravida, pellentesque in, quam. Praesent vitae lacus. Proin neque lorem, convallis id, sollicitudin et, gravida non, massa. Suspendisse in leo. Sed vestibulum. Quisque pharetra, felis ut imperdiet venenatis, magna ante auctor ipsum, quis pretium est lacus ultrices nunc. Nam sem.

2nd Column

Fusce accumsan. Proin et sem. Ut tincidunt. Etiam a massa. Sed elit tellus, aliquam non, sagittis eleifend, adipiscing at, tortor. Nam diam. Nullam sapien dui, lacinia nec, feugiat gravida, pellentesque in, quam. Praesent vitae lacus. Proin neque lorem, convallis id, sollicitudin et, gravida non, massa. Suspendisse in leo. Sed vestibulum. Quisque pharetra, felis ut imperdiet venenatis, magna ante auctor ipsum, quis pretium est lacus ultrices nunc. Nam sem.

3rd Column

Fusce accumsan. Proin et sem. Ut tincidunt. Etiam a massa. Sed elit tellus, aliquam non, sagittis eleifend, adipiscing at, tortor. Nam diam. Nullam sapien dui, lacinia nec, feugiat gravida, pellentesque in, quam. Praesent vitae lacus. Proin neque lorem, convallis id, sollicitudin et, gravida non, massa. Suspendisse in leo. Sed vestibulum. Quisque pharetra, felis ut imperdiet venenatis, magna ante auctor ipsum, quis pretium est lacus ultrices nunc. Nam sem.