Question

I am getting an issue within IE7. I have the created the following html to demonstrate the possible ‘issue’.

HTML:

<div id="container">
    <div id="head">
    </div>
    <div id="left">
    </div>
    <div id="right">
    </div>
    <div id="no-float">
    </div>
</div>

CSS:

#container {
    width:200px;
    height:200px;
    margin: 0 auto;
    background-color:#555555;
}
#head {
    width:200px;
    height:20px;
    background-color:black;
    float:left;
}
#left {
    width:100px;
    height:40px;
    background-color:blue;
    float:left;
}
#right {
    width:100px;
    height:40px;
    background-color:red;
    float:left;
}

#no-float {
    width:20px;
    height:20px;
    position:relative;
    background-color:green;
}

Now I expect the green no-float div to be at the very top left of the container as from my understanding the normal content should completely ignore the floated content. This works as expected in all browsers I have tested by not in IE7. Is it a problem with my understanding of floats or is this a bug in IE7? If it is a bug can anyone point me in the right direction to fix it? Here is a jsfiddle of the problem.

JSFiddle

Answer 1

The float model of IE7 is horrid. See here for issues related to your problem, and why it won’t be fixed through using just floats. You are going to have to resort to absolute positioning if you want to keep your elements in the source order you have. This could be conditionally fed to IE7, or it would work as is for all modern browsers.

Here is the fiddle.

Add position: relative to the #container, then

#no-float {
    width: 20px;
    height: 20px;
    position:absolute;
    background-color:green;
    top: 0;
    left: 0;
}