IE6 CSS floating element margin bug

Recently, I was doing my blog redesign and I faced strange IE6 behavior. The search box floating div didn’t want to float all away to the right. I tried to tweak child and parent margins and finally, I solved this mystery. However, I did not understand the root of the problem. Today, I was reading Smashing Magazine article about IE6, IE7, IE8 css differences and I found it.

Left and right margins are doubled on floated elements that touch their parents’ side edges. What a surprise! This a real bug of IE6 and I didn’t know about it. I knew about a min-width/min-height problem, attribute selectors and other IE6 bugs, but I didn’t know this one. Probably I faced the problem before but never paid attention to it. So, if you face a strange positioning problem of floating elements in IE6, know this is well known IE6 bug. Below is a simple illustration of the problem. The right div should have 30px right margin. In IE6 it shows up as 60px.

.left
{
    width:100px;
    height:100px;
    background-color:aqua;
    float:left;
}

.right
{
    width:100px;
    height:100px;
    background-color:aqua;
    float:right;
    margin-right:30px;
}

#parent
{
    overflow:hidden;
    width:300px;
    border:solid 1px black;
}

<div id="parent">
    <div class="left">
    </div>
    <div class="right">
    </div>
</div>