Bizarre float bug in IE7

Question

On the webpage I'm working on here, I have a main div, and within the main div, and image div. Roughly speaking, the important HTML is:

<div id="wrapper">
    <div id="main">
        <div class="images">
            <p>Content</p>
            <div class="clear"></div>
        </div>
        <p>Text...</p>
    <div class="clear"></div>
    </div>
</div>

and the CSS:

div#wrapper
{
    padding: 10px;
    width: 90%;
}

div#main
{
    padding: 5px;
}

div.images
{
    float: right;
    width: 320px;
    margin-left: 5px;
}

div.clear
{
    height: 0;
    clear: both;
}

Apologies if the cause of the problem is not within the code here, but I think it is.

The problem is, when the images div becomes larges than the content of the main div, the wrapper div loses its left padding; and the bottom padding of main increases. The problem only seems to occur in IE7.

Answer 1

Turns out that giving #main hasLayout does the trick.

div#main
{
    zoom: 1;
}

Put this in the IE7 stylesheet, and it's pretty much fixed. Still to large a border at the bottom, but not too important.