Relative positioned divs height added up in IE6 before the negative top

Question

Hi, I have the following

<div id=A style='height: 120px;'>
  <div id=B style='height: 100px;'>
    <div id=D style='height:  60px; top 0px; position: relative;'>Stuff D</div>
    <div id=E style='height:  80px; top: -40px; position: relative;'>Stuff E</div>
  </div>
  <div id=C style='height:  20px;'>Footer</div>
</div>

In browsers other than IE6, this works fine. However, IE6 adds the heights of D & E to 140 and forces B to become 140 which pushes down C by 40. However, the top of E is rendered 40px overlapping D as it should. It's just the box for B becomes the 140 high only in IE6.

What can I do with the CSS/HTML to make IE6 behave without affecting other browsers which get it and keep B at 100px?

Answer 1

It's not the fact that the heights are added up beforehand that's messing you up---all browsers do this. It's the fact that IE 6 has a different idea of what to do when the height of #B's content exceeds 100px. Since you know the height you want for #B, you can add overflow: hidden to the existing style.

<div id="B" style="height: 100px; overflow: hidden;">

Answer 2

I found that margin-top: -??px; will do the same thing as just top: -??px does. Thanks for the assistance. I will be trying the overflow: hidden and the !important, because they sound interesting.