Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Background Image Autosize

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

7:12 pm on Feb 28, 2007 (gmt 0)

New User

10+ Year Member

joined:Mar 24, 2004
votes: 0

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:
#coltest {

#leftcol {


#rightcol {


<div id="coltest">
<div id="leftcol">
<p>Lorem ipsum dolor sit amet, consectetuers</p>
<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>


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.

2:20 pm on Mar 1, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
votes: 0

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.



Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members