Fresh Set Of Eyes - Parent Div Not Expanding

Question

diakonos1023 0 Newbie Poster

15 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:

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="" title="Test Page">Test Page</a></li>
<li class="page_item page-item-4"><a href="" 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="" title="Engagement">Engagement</a></li>
<li class="page_item page-item-11"><a href="" title="Information">Information</a></li>
<li class="page_item page-item-16"><a href="" title="Contact">Contact</a></li>
<li class="page_item page-item-6"><a href="" title="Blog">Blog</a></li>
<li class="page_item page-item-55"><a href="" 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

html-css php:wordpress web-design

4 Contributors
3 Replies
228 Views
3 Months Discussion Span
Latest Post 15 Years Ago Latest Post by Skorpio07

Dani AI

Generated 7 Months Ago

Quick diagnosis: the wrapper is collapsing because its children are floated and the layout relies on percentage heights that have no explicit parent height. Floated elements are removed from normal flow, so a parent that only contains floats will not grow to the children’s height. Also, height:100% (or min-height:100%) won’t make a container grow to fit its children unless an ancestor has a fixed height — that explains why the sidebars with height:100% never stretch. This matches what described and what reported after trying clears/overflow.

Practical fixes (in order of least invasive to most):

Add a modern clearfix to the wrapper so it contains floated children:

/* add this class to the wrapper element */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Remove any height:100% from the wrapper and the left/right bars so their heights are determined by content. If overflow:auto wasn’t working in the current markup (as mentioned by ) try the clearfix first — it’s reliable and won’t introduce scrollbars.

Alternative containment options: #wrapper { display: table; } will make the wrapper enclose floats; #wrapper { overflow: hidden; } also contains floats but may clip content or hide scrollbars.

A cleaner visual approach (suggested by ) is to drop the separate left/right bar elements and apply the repeating edges as backgrounds on the wrapper using CSS3 multiple backgrounds:

/* two-sided repeating edges on one container */
.wrapper-background {
  background:
    url('/path/to/left-edge.png') left top repeat-y,
    url('/path/to/right-edge.png') right top repeat-y;
}

This removes float/containment problems entirely (add a simple fallback for very old browsers if needed).

Quick debugging checklist: give the wrapper a temporary colored background or a dashed outline to see its measured box, inspect computed height with browser dev tools, confirm no child is absolutely positioned (that removes it from flow), and validate markup so stray tags or broken nesting are not interfering (see ’s comments about proper background syntax). These steps should reveal the exact cause and restore the expected expansion.

All 3 Replies

scottloway 12 Junior Poster in Training

15 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 ( 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('');
		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('');
		background-repeat: repeat-y;
		background-position: left top;       
		background-color:#FFFFFF;} 
div.rightbar {       
		float:right;       
		width:19px;       
		height:100%;       
		background-image:url('');
		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('');
	   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('');
	   background-repeat: repeat-y;
	   background-position: left top;
       background-color:#FFFFFF;
}
div.rightbar {
       float:right;
       width:29px;
       height:100%;
	   background-image:url('');
	   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="" 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="" title="Test Page">Test Page</a>
                            </li>
                            <li class="page_item page-item-4">
                                <a href="" 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="" title="Engagement">Engagement</a></li>
                            <li class="page_item page-item-11"><a href="" title="Information">Information</a></li>
                            <li class="page_item page-item-16"><a href="" title="Contact">Contact</a></li>
                            <li class="page_item page-item-6"><a href="" title="Blog">Blog</a></li>
                            <li class="page_item page-item-55"><a href="" title="Under Construction">Under Construction</a></li>		
                        </ul>		
                    </li>			
                    <img src="" 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

Dani AI

Recommended Answers Collapse Answers

All 3 Replies

Recommended Answers