Fresh Set Of Eyes - Parent Div Not Expanding

Question

diakonos1023 0 Newbie Poster

13 Years Ago

Hey folks!

I've been working on a site for several days trying my best to conquer the ever plaguing issue of creating a parent div that expands as the child divs inside it grow with their appropriate content. And, so everything is on the table, this is being built on a custom Wordpress site with significant modifications to the existing Twenty Ten theme templates/CSS/code that comes with Wordpress.

I have honestly done my due diligence in searching forums here and via Google to discover the last piece of the puzzle that I simply cannot seem to crack. Here's the issue:

Here's a test page for reference:

http://www.magnoliapair.com/test-page

I have 5 divs I'm focused on here (code will be provided below explanation):

1) A wrapper div that is set at a fixed width, but should be set to grow the length of the page, no matter the size.

Inside that div I have 5 divs:

2) A left border div that contains a background border image designed to repeat along the y axis (div.leftbar)
3) A main div (#main) that contains two child divs -- #primary and #content
4) A right border div that contains a background border image designed to repeat along the y axis (div.rightbar)

At this point, nearly everything seems to be working as expected except that the wrapper div will not expand enough to allow the left and right bars to draw the length of page. I've tried, what seems to be, all the standard "tricks" to getting divs to grow properly: "height:auto !important", "height:100%", "min-height:100%" - all of these associated with the varying divs referenced and in varying combinations -- and an empty div at the very bottom of the wrapper div with a "clear:both" style attribute. I've even played around with the arrangement of the divs to try and get those left and right bars to grow. Nothing. What you see on the test page is the best I've been able to get it. Based on my web development tools in both Mozilla and IE, it appears the #wrapper div is only growing to a point while the #main, #primary, and #content divs are behaving exactly as desired...which is a little baffling too.

So...I need a fresh set of eyes to help me see what I'm missing. Any help, direction, suggestions, etc would be greatly appreciated! And I'm sure I'm unintentionally leaving out some details so please, ask questions if needed. Here's the CSS code:

#wrapper {
       margin:0px auto;
       width:867px;
       height:100%;
       min-height:100%;
}

#main {
        float:left;
        width:830px;
        padding:0px;
        margin:0px;
        background-color:#FFFFFF;
}

div.leftbar {
       float:left;
       width:19px;
       margin-left:-1px;
       height:100%;
       background: url('/images/leftside_background.png') repeat-y;
}

#primary {
       float:left;
       width: 150px;
       text-align:right;
       background-color:#FFFFFF;
}

#content {
       float:right;
       width: 665px;
       padding:0 5px 0 5px;
       background: url(/images/verticalstitching.png) repeat-y left top;
       background-color:#FFFFFF;
}

div.rightbar {
       float:right;
       width:19px;
       height:100%;
       background:url(/images/rightside_background.png) repeat-y;
}

And here's the corresponding HTML for the page:

<div id="wrapper">

   <div class="leftbar">&nbsp;</div>

   <div id="main">

	<div id="primary" class="widget-area" style="background-color:#FFFFFF;">
		<ul class="xoxo">
<a href="/"><img src="/images/logo_nav.png"></a>
<li id="pages-9" class="widget-container widget_pages"><h3 class="widget-title">Pages</h3>
                 <ul>
			<li class="page_item page-item-62 current_page_item"><a href="http://www.magnoliapair.com/test-page" title="Test Page">Test Page</a></li>
<li class="page_item page-item-4"><a href="http://www.magnoliapair.com/home" title="Weddings">Weddings</a>
<ul class='children'>
	                <li class="page_item page-item-9"><a href="http://www.magnoliapair.com/home/collection-i" title="Collection I">Collection I</a></li>
</ul>
</li>
<li class="page_item page-item-24"><a href="http://www.magnoliapair.com/engagement" title="Engagement">Engagement</a></li>
<li class="page_item page-item-11"><a href="http://www.magnoliapair.com/information" title="Information">Information</a></li>
<li class="page_item page-item-16"><a href="http://www.magnoliapair.com/contact" title="Contact">Contact</a></li>
<li class="page_item page-item-6"><a href="http://www.magnoliapair.com/blog" title="Blog">Blog</a></li>
<li class="page_item page-item-55"><a href="http://www.magnoliapair.com/" title="Under Construction">Under Construction</a></li>
		</ul>
		</li>			<img src="/images/horizontalstitching.png">
                                </ul>
		</div><!-- #primary .widget-area -->
	<div id="content">
		Test content here	
        </div><!-- #content -->
   </div><!-- main -->
<div class="rightbar">&nbsp;</div>
<div style="clear:both">&nbsp;</div>
</div><!-- #wrapper -->

Thanks in advance for your time and suggestions!
Rich

child css div expandable parent web-design

4 Contributors
3 Replies
211 Views
3 Months Discussion Span
Latest Post 12 Years Ago Latest Post by Skorpio07

All 3 Replies

scottloway 12 Junior Poster in Training

13 Years Ago

As a real quick solution, you could get rid of your leftbar/rightbar divs, and instead cut an image that spans the full width of your #wrapper div, and set it to repeat-y.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

crunkie 0 Newbie Poster · Answer 1 · 2011-07-08T17:43:27+00:00

Hi Rich,
Just wanted to see if you found a solution to this? I'm having the same problem, nothing works, not overflow: auto, not "clear" or anything, it's driving me mad!
Crunkie

Skorpio07 0 Newbie Poster · Answer 2 · 2011-07-13T03:35:19+00:00

please make the following adjustments:

in the CSS section, do this;
1) all background (stitching?) definitions are really in the format of background-image:url('image.jpg') make sure to single quote the image itself, you were sloppy about this, SEE HERE FOR DETAILS http://www.w3schools.com/css/css_background.asp
2) repeat-y is not a valid definition, format as background-repeat:repeat-y;
3) left top is not a valid definition, format as background-position:left top;
4) clear out unused non referenced styles (ie xoxo, page_item, 'children', etc)
5) fully source your URL's (http://server.com/image.jpg and not /images/image.jpg)
6) validate your doc, it has error's, see http://validator.w3.org/#validate_by_input

i tried to use both your test page and what you included above so that i got below, did my best to fix, still some error's:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">	
<head>
<title>this is a test</title>
<style type="text/css"> 
#wrapper {       
		margin:0px auto;       
		width:867px;       
		height:100%;       
		min-height:100%;
		} 
#main {        
		float:left;        
		width:830px;        
		padding:0px;        
		margin:0px;        
		background-color:#FFFFFF;
		} 
div.leftbar {       
		float:left;       
		width:19px;       
		margin-left:-1px;       
		height:100%;       
		background-image: url('http://www.magnoliapair.com/images/leftside_background.png');
		background-repeat:repeat-y;
		} 
#primary {       
		float:left;       
		width: 150px;       
		text-align:right;       
		background-color:#FFFFFF;} 
#content {       
		float:right;       
		width: 665px;       
		padding:0 5px 0 5px;       
		background-image: url('http://www.magnoliapair.com/images/verticalstitching.png');
		background-repeat: repeat-y;
		background-position: left top;       
		background-color:#FFFFFF;} 
div.rightbar {       
		float:right;       
		width:19px;       
		height:100%;       
		background-image:url('http://www.magnoliapair.com/images/rightside_background.png');
		background-repeat: repeat-y;}
#wrapper {
       margin:0px auto;
       width:867px;
       height:100%;
       min-height:100%;
}
#main {
        float:left;
        width:830px;
        padding:0px;
        margin:0px;
        background-color:#FFFFFF;
}
div.leftbar {
       float:left;
       width:19px;
       margin-left:-1px;
       height:100%;
       background-image: url('http://www.magnoliapair.com/images/leftside_background.png');
	   background-repeat: repeat-y;
}
#primary {
       float:left;
       width: 150px;
       text-align:right;
       background-color:#FFFFFF;
}
#content {
       float:right;
       width: 665px;
       padding:0 5px 0 5px;
       background-image: url('http://www.magnoliapair.com/images/verticalstitching.png');
	   background-repeat: repeat-y;
	   background-position: left top;
       background-color:#FFFFFF;
}
div.rightbar {
       float:right;
       width:29px;
       height:100%;
	   background-image:url('http://www.magnoliapair.com/images/rightside_background.png');
	   background-repeat: repeat-y;
}
</style>
</head>
<body>
    <div id="wrapper">    
        <div class="leftbar">this is the left navbar&nbsp;</div>    
        <div id="main"> 	
            <div id="primary" class="widget-area" style="background-color:#FFFFFF;">		
                <ul class="xoxo"><a href="/"><img src="http://www.magnoliapair.com/images/logo_nav.png" border="0" alt="nav logo" /></a>
                    <li id="pages-9" class="widget-container widget_pages">
                        <h3 class="widget-title">Pages</h3>                 
                        <ul>			
                            <li class="page_item page-item-62 current_page_item">
                                <a href="http://www.magnoliapair.com/test-page" title="Test Page">Test Page</a>
                            </li>
                            <li class="page_item page-item-4">
                                <a href="http://www.magnoliapair.com/home" title="Weddings">Weddings</a>
                                <ul class='children'>	                
                                    <li class="page_item page-item-9"><a href="http://www.magnoliapair.com/home/collection-i" title="Collection I">Collection I</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="page_item page-item-24"><a href="http://www.magnoliapair.com/engagement" title="Engagement">Engagement</a></li>
                            <li class="page_item page-item-11"><a href="http://www.magnoliapair.com/information" title="Information">Information</a></li>
                            <li class="page_item page-item-16"><a href="http://www.magnoliapair.com/contact" title="Contact">Contact</a></li>
                            <li class="page_item page-item-6"><a href="http://www.magnoliapair.com/blog" title="Blog">Blog</a></li>
                            <li class="page_item page-item-55"><a href="http://www.magnoliapair.com/" title="Under Construction">Under Construction</a></li>		
                        </ul>		
                    </li>			
                    <img src="http://www.magnoliapair.com/images/horizontalstitching.png" alt="horstitch" />                                
                </ul>		
            </div><!-- #primary .widget-area -->	
        <div id="content">		Test content here	</div><!-- #content -->   
        </div><!-- #main -->
    <div class="rightbar" style="height:100%;">this is the rightbar&nbsp;</div>
    <div style="clear:both">this div is cleared both&nbsp;</div>
    </div><!-- #wrapper -->
</body>
</html>

so fix what you can and repost your code, i will help out when it has been formatted and validated.

Fresh Set Of Eyes - Parent Div Not Expanding

Recommended Answers Collapse Answers

All 3 Replies

Recommended Answers