PDA

Click to See Complete Forum and Search --> : container div not extending with inner contents

mlecho
12-18-2007, 12:29 PM
just need a little help formating this correctly. In essence, i have a wrapper div that has 2 divs (id="left" , id="right") inside. The left right divs are aliged horizonataly, acting as columns (both with a set width to achieve the effect). the issue i am having is if the left or right div have large amounts of text, the wrapper div will not extend with the height of these inner divs. I am expecting to see the wrapper extend vertiacally with it's inner divs...why is this not the case, and what should i be looking for?


<html>
<head>
<title></title>
</head>
<body>
<div id="content">
<div id="content_wrapper">
<div id="left">
<div id="text_box">
<div id="title_bar"><img src="imgs/titlebar/title_wine.gif" ></div>
<p>large amounts of text...</p>
<p>more amounts of text...</p>
<p>last amounts of long tesxt text...</p>
<div id="wine_form">

</div>
</div>
</div>
<div id="right">
<div id="img_holder"><img src="imgs/main/main_wine.jpg"></div>
</div>
</div>
</div>
</body>
</html>



/* CONTENT WRAPPER */
/* CONTENT LEFT */
#fade{width: 941px; height: 280px;background: url(../imgs/bg_fade.png) no-repeat;}
#content{background: url(../imgs/bg_filler.png) repeat-y;width: 941px; margin-bottom: -5px;}
#content #content_wrapper{width: 939px;position: relative;top: -209px;min-height: 150px;}
div#title_bar{width: 516px;height: 55px;}
#content div#left{float: left;width:485px;}
#content div#text_box{position: relative;top: -60px;width: 450px;min-height: 300px;}
#content div#text_box p{padding-left: 2em;}

/* CONTENT RIGHT- IMAGE and CAPTIONS*/
#content div#right{float: left;width: 399px;height: 280px;position: relative;right: -25px;top: -47px;}
WebJoel
12-18-2007, 12:52 PM
add overflow:hidden; to either one, the other or both, of your 'external wrappers'. Sounds as if there is a 'floated' inner-child (either the left, or the content div).

An easier way around this, is to have a 'container' and place the 'main' in it, give it a "margin-left" equal to the width of the desired 'left'. Populate the 'content' normally, and populat the 'container' with the 'left' content. This is (as I understand the concept), called 'faux columns' because the 'column' is virtual... it is created by the margin-left's 'gap', to be filled with the 'left' content..
mlecho
12-18-2007, 01:03 PM
wow, works, but now messes up my rollover effect on my nav (not even part of that parent div)...dang....can i ask, why exactly that works? Perhaps that will enlighten me on why it effects the navigation div, three divs above
WebJoel
12-18-2007, 07:17 PM
wow, works, but now messes up my rollover effect on my nav (not even part of that parent div)...dang....can i ask, why exactly that works? Perhaps that will enlighten me on why it effects the navigation div, three divs above "overflow:hidden;" causes the parent element to expand to encompass floated element children. But apparently this 'cure' has given rise to another issue(?)
I'll snag your code and check it over..

back:

-I copied your code and cannot make any sence of what you are trying to accomplish. Can you sketch a diagram or describe it. What I was seeing, is too confusing. Way too many 'nested DIVs' and, it isn't necessary really to wrap an image in a DIV it that is all it is there for. You can just place the image.

And that relative-positioned DIV with the top:-295px is no good. "relative" means exactly that, -the space it occupies is relative, and positioning it 'negatively' only moves the visual aspect, but preserves the spacial location. -The DIV still occupies that relative dimension. Later if you were to add more content, you'd find a mysterious inability to populate that 'white' area due to it's relativity...
PaulBeirne
04-10-2011, 10:58 PM
I know this is an old thread, but if anyone else comes looking for the answer all you need to do is create a div at the bottom of your container div with the parameter

clear: both;

Then your container's background will extend to the bottom.