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.
