Question

I have a simple HTML layout:

<div style="position:relative; width:200px">
   <div style="position:absolute; top:0; left:0; background-color:red; z-index:-1; width:100%; height: 100%"></div>
   Some text goes here....
</div>

Something like this works fine in all the browsers, except for IE6. As the text is added the top div is stretched and absolutely position div is stretched as well. But in IE6 the absolutely position div will always stay only 1 line in height. I know that IE6 can’t dynamically recalculate sizes, and because of that you have to set height: 100% on the body tag if you ever want to use height: 100% anywhere on the page, but in this case, I can’t set height:100% on the outer div, since I want it to be just the right size for the text inside of it. Any help?

Answer 1

After a lot of testing and investigation, I came to a conclusion, that there’s no way around this issue for IE6, other than JavaScripts, which doesn’t work for me. So I had to change the structure around a bit. The end result looks something like this:

<div style="position:relative; width:200px; background-color:red;">
   <div style="margin: -10px -20px">Some text goes here....</div>
</div>

This way the content of the inner div is going to set the height of the inner div and negative margins on it, will make sure that the outer div is always 20px bigger in height and 40px bigger in width the content div. I know the answer doesn’t make sense when looking at the question, but it works exactly the way I need it too, since it allows me to create multiple divs on the background (outer div) with images and then adjust content div with negative margins, so that it occupies the same amount of space as all of the background divs.