Floated div causes gives padding to bottom in IE

[skube]

I'm having a weird problem in IE. I've put together a sample simplified code (copy and paste the code below, and test in IE - works properly in Moz).

It appears that IE adds padding to both top and bottom of the container div, when holding a floated div.

<style>
div#content { padding:20px 0 0 0; border:1px solid blue}
.clear {height:0; line-height:0; clear:left;font-size:1px}
</style>

<div id="content">
<div style="float:left;">
<div><img src="" width="100" height="10" alt="" />
</div>
</div>
<div class="clear">&#160;</div>
</div>

If you change the 20px top padding to 0 it works, but adding the 20px back in, gives padding to bottom as well as the top, not just the top as you would expect.

<style>
div#content { padding:0px 0 0 0; border:1px solid blue}
.clear {height:0; line-height:0; clear:left;font-size:1px}
</style>

<div id="content">
<div style="float:left;">
<div><img src="" width="100" height="10" alt="" /></div>
</div>
<div class="clear">&#160;</div>
</div>

Removing the float, makes everything work properly. unfortunately, I need the float for my application (tho for this simple example it is pointless).

Any ideas? Anyone?
thanks,
skube

[ItsCosmo]

I couldn't pin the cause down precisely, but I did find that the so-called "Holly hack" appears to fix the problem. Add this to the stylesheet:

* html div#content {height:1%}

This will cause IE to behave in a more "normal" fashion without affecting other browsers.

Does this help?

[skube]

Yes Thanks!

I didn't know about that one...I still don't quite understand what it's doing, and why a 1% height doesn't cause other problems in other browsers. It does seem to have no deterimental effects tho...

I guess I'll research it later when I have more time.

Thanks again.

[ItsCosmo]

Glad this helped. In a nutshell, this rule doesn't cause problems in other browsers because other browsers don't "see" the rule. Only IE can see it because it is the only browser that thinks there is some element "*" that is a parent of "html".