How To/webdev/

IE6 - not overlaping float

About float

When element has float style assigned it should be rendered over non-float elements. It reminds ticky note on screent. It is always in the front.

Bug

Unfortunatelly this code wont work in IE6. The floating element will not overlap floated element.

html:
<div id="a"></div>
<div id="b"></div>

css:
#a{width:40px; height:50px; border:4px solid red; float:left;}
#b{height:20px; border:2px solid pink;}

See this image. Element without float is not under element with float. It is next to it. It will work correctly in other browsers.

Why, MS, why?

It is caused by height style for non-floating element. It enables hasLayout property so non-floating element behaves like floating element and 2 floating element don't overlap.

To avoid this bug dont eneble hasLayout property.

Solution

In example code it is easy. Just put another div inside non-floating div and assign height to it:

html:
<div id="a"></div>
<div id="b"><div id="c"></div></div>

css:
#a{width:40px; height:50px; border:4px solid red; float:left;}
#b{border:2px solid pink;}
#c{height:16px;} /* expected parent height - topBorder - bottomBorder! */