Question

There is a div that has inner content, a div with a border that’s inside a div. Somehow, this div is expanded to encompass the next div. It blows my mind.

<div style='background: yellow;'>   <div>     <div style='border: 1px solid black; background: green'>green background</div>   </div> </div> <div style='margin-top: 100px;'>   IE gives me a yellow background, unless i take away the border of the green    background div. </div> 

I’m wondering the cause of this and how to solve it.

Answer 1

You need to ‘give layout’ to the first div. You better do this using IE6 targeted styles:

<style>    * html .haslayout {        display:inline-block;    } </style>  ...  <div style='background: yellow;' class='haslayout'> 

This is a known IE6 issue with the hasLayout attribute. Read more on it here – http://www.satzansatz.de/cssd/onhavinglayout.html