www.webdeveloper.com
Results 1 to 5 of 5

Thread: container div not extending with inner contents

  1. #1
    Join Date
    Sep 2006
    Posts
    87

    container div not extending with inner contents

    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 Code:
    <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>
    PHP Code:
    /* 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;} 

  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    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..
    Last edited by WebJoel; 12-18-2007 at 12:55 PM.

  3. #3
    Join Date
    Sep 2006
    Posts
    87
    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

  4. #4
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Quote Originally Posted by mlecho
    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...
    Last edited by WebJoel; 12-18-2007 at 07:32 PM.

  5. #5
    Join Date
    Apr 2011
    Posts
    1
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles