Background Image Autosize

How to autosize a div based on div's located inside

[mcpjon]

OK, it's just been one of those days. Despite the fact that I have done this many times before, today I can't seem to figure it out. I've got a large all encompassing div, and two columns inside. My Background is an image that is 780px wide and 900px tall. I need the image to expand to always be as tall as the largest column (which should always be the right column).

Here is general css and html:
CSS:
#coltest {
background:url(images/index_11.gif);
background-position:top;
width:780px;
height:100%;
min-height:100%;
}

#leftcol {
width:300px;
margin-right:30px;
margin-left:20px;
float:left;
height:auto;

}

#rightcol {
margin-left:20px;
margin-right:20px;
width:390px;
float:right;
height:100%

}

HTML:
<div id="coltest">
<div id="leftcol">
<p>Lorem ipsum dolor sit amet, consectetuers</p>
</div>
<div id="rightcol">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus molestie tellus ac magna. Duis et lectus. Nunc ut massa. Aenean a leo nec velit dictum pulvinar. Morbi commodo elit ac ipsum. Etiam tortor. Etiam nec sapien sit amet quam volutpat iaculis. Vivamus aliquet nunc nec lorem. Ut semper orci non nisi. Morbi eu dui condimentum lacus mollis sagittis. Phasellus leo nibh, sagittis quis, lacinia ut, molestie et, tellus. Vivamus sodales. Suspendisse consequat felis fermentum turpis.</p>
</div>

</div>

I've tried lots of different things and it only seems to work in either IE or Firefox, but not both. I know that I'm missing something really simple, but can't make it work. Maybe I should lay off the cold medicine.

[SuzyUK]

you just need to add something, content or clearing element to force the #coltest div to "contain" it's floated children or simply adding overflow:auto; to the CSS for #coltest might be easiest

with HTML add a clearing element just before the containers closing </div> tag, or if you're going to be putting a footer underneath the columns put it inside the container and it should become a natural clearing aid..

- IE is doing it by default with the code you have here because the width, height, and min-height on #coltest are all triggering haslayout to true which it what it uses.

Suzy