Internet Explorer - Space Between Floated Divs

Question

I've been running into a presentation issue with Internet Explorer. The following simple block of code renders as I would expect it to in Safari, FireFox, Chrome, and Opera. However it results in a noticeable space between the left and right floated DIV elements in both IE6 and IE7.

My question is: Is there a more correct way to achieve a float such that the same CSS works in both IE and the other browsers I've mentioned? If not, what is the best approach for getting rid of the space in Internet Explorer?

Thanks, Matt

<style>
.left {
 width:100px;
 float:left;
 border: solid black 1px;
}

.right {
 width: 100px;
 margin-left:100 px;
 border: solid red 1px;
}
</style>

<div class="left">
    a
</div>
<div class="right">
    b
</div>

Since this is a community wiki. I thought I'd post the working code with the solution proposed below by Plan B.

<style>
        .left {
     width:100px;
     border: solid black 1px;
        float:left;
    }

    .right {
     width:100px;
     border: solid red 1px;
     float:left;
    }
    .clear {
     clear:both;
    }
</style>

<div class="left">
    a
</div>
<div class="right">
    b
</div>
<div class="clear"></div>
c

Answer 1

Try adding display: inline to floated divs. I believe this is an IE bug of adding more margins to floated elements. display: inline worked for me in the past. Hope this helps.

Answer 2

It is the double margin float bug. Described well here:

http://www.positioniseverything.net/explorer/doubled-margin.html

Answer 3

Float them both left, add the following after both divs:

 <div class="clear"></div>

 .clear { clear: both; }

That or use padding instead of margins.

Answer 4

oohhh thanks for posting this article, this problem has been killing my life. i just want to ie(internally explode)!

Answer 5

I haven't figured out how to make my comment a reply to another comment!! But Brian Kim's answer is correct IF the problem is double-margin float bug. Plan B is wrong in the reply to the comment: yes floats are blocks, which is why it's perfectly safe to set display: inline on them. Smarter browsers will ignore it as the float must be in a block context. But in IE6, this setting somehow magically fixes its tendency to add doubled sidemargins. It is the standard fix for double-margin float bug in IE6. (Though Matty says this may have been 3-px jog instead)