IE Rendering Bug

This bug affects IE7 and below on Windows, but especially IE6 and IE7. The browser fails to paint the bottom div fully when the window is narrowed. To see the bug, minimize the window and enlarge it to fit the screen width. Refresh the page if it already looks broken. At this point, both rows of divs should appear fully coloured. (Blue at the top, green underneath.) Now as soon as you start to drag the window egde in at the sides, the bottom div drops part of the background to reveal the page behind. As the window gets narrower, the green background disappears at different heights.

There also seems to be another bug here. At extremely narrow widths, why do the floated divs go above their container when they are too narrow to fit? Shouldn't they drop down instead? (Note: this has been fixed in IE7 Final.)

Notes:

Although IE5 doesn't demonstrate the rendering bug at wide widths like IE6 and IE7, it does at narrow widths.
The black borders represent the container divs, the red ones the floated divs inside them. (There are two, representing a left and a right column.)
When the bug occurs, note how some of the black borders are not rendered either.
To fix the bug, you can insert a div inbetween the two containers. See the source code for an example.
The bug can also be cured by just using one container row.
This bug was first thought to affect IE7 only, and was documented here.

Lines of content here to demonstrate the bug. Lines of content here to demonstrate the bug. Lines of content here to demonstrate the bug. Lines of content here to demonstrate the bug.

Created by Chris Hester 18 October 2006 · Last updated: 20 October 2006 · "Trident, what hast thou done to us?"