homepage Welcome to WebmasterWorld Guest from 54.211.97.242
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Background Image Autosize
How to autosize a div based on div's located inside
mcpjon

10+ Year Member



 
Msg#: 3266955 posted 7:12 pm on Feb 28, 2007 (gmt 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:
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

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



 
Msg#: 3266955 posted 2:20 pm on Mar 1, 2007 (gmt 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.

Suzy

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved