Clever Geek Handbook

Bizarre floating point error in IE7

In a webpage I am working on here , I have a main div, and basically a div and a 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 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;
}

Sorry if the source of the problem here is not in the code, but I think it is.

The problem is, when the div is images

larger than the content of the div main

, the div wrapper

loses its left padding; and the bottom complement main

increases. The problem only occurs in IE7.

+2


source to share


1 answer


It turns out that the grant #main

hasLayout

does the trick.

div#main
{
    zoom: 1;
}


Put that in an IE7 stylesheet and it's pretty much fixed. An even bigger border at the bottom, but not too important.

+1


source






More articles:


All Articles