Fresh Set Of Eyes - Parent Div Not Expanding - CSS forum at WebmasterWorld

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:

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 that contains to 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 varying divs 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. 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 great appreciated! And I'm sure I'm unintentionally leaving out some details so please, ask questions if needed. Here's the CSS code:

DOCTYPE = <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


#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="/test-
page" title="Test Page">Test Page</a></li>
<li class="page_item page-item-4"><a href="/home" title="Weddings">Weddings</a>
<ul class='children'>
  <li class="page_item page-item-9"><a href="/home/collection-i" title="Collection I">Collection I</a></li>
</ul>
</li>
<li class="page_item page-item-24"><a href="/engagement" title="Engagement">Engagement</a></li>
<li class="page_item page-item-11"><a href="/information" title="Information">Information</a></li>
<li class="page_item page-item-16"><a href="/contact" title="Contact">Contact</a></li>
<li class="page_item page-item-6"><a href="/blog" 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

[edited by: alt131 at 3:15 pm (utc) on Jul 23, 2011]
[edit reason] Side Scroll [/edit]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>untitled document</title>

<style type="text/css">
* {
padding:0;
margin:0;
position:relative;
}
html,body {
height:100%;
}
#wrapper {
margin:auto;
width:867px;
height:100%;
min-height:100%;
}
#leftbar {
float:left;
width:19px;
height:100%;
margin-left:-1px;
background:url(/images/leftside_background.png) repeat-y;/
}
#main {
float:left;
width:830px;
height:100%;
background-color:#fff;
}
#primary {
float:left;
width:150px;
text-align:right;
background-color:#fff;
}
#content {
float:right;
width:665px;
height:100%;
padding:0 5px 0 5px;
background:url(/images/verticalstitching.png) repeat-y left top;
background-color:#fff;
overflow:auto;
}
div.rightbar {
float:right;
width:19px;
height:100%;
background:url(/images/rightside_background.png) repeat-y;
}
</style>

</head>
<body>

<div id="wrapper">

<div id="leftbar"> </div>

<div id="main">

<div id="primary" class="widget-area">

<a href="#"><img src="/images/logo_nav.png" alt=""></a>

<ul class="xoxo">
<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="/test-
page" title="Test Page">Test Page</a></li>
<li class="page_item page-item-4"><a href="/home"
title="Weddings">Weddings</a>
<ul class='children'>
<li class="page_item page-item-9"><a href="/home/collection-i"
title="Collection I">Collection I</a></li>
</ul></li>
<li class="page_item page-item-24"><a href="/engagement"
title="Engagement">Engagement</a></li>
<li class="page_item page-item-11"><a href="/information"
title="Information">Information</a></li>
<li class="page_item page-item-16"><a href="/contact"
title="Contact">Contact</a></li>
<li class="page_item page-item-6"><a href="/blog"
title="Blog">Blog</a></li>
<li class="page_item page-item-55"><a href="#" title="Under
Construction">Under Construction</a></li>
</ul></li>
</ul>

<img src="/images/horizontalstitching.png" alt="">

</div>

<div id="content">
Test content here
</div>

</div>

<div class="rightbar"> </div>

</div>

</body>
</html>

Fresh Set Of Eyes - Parent Div Not Expanding

The plaguing issue of divs that don't expand!

diakonos1023

birdbrain

swa66

diakonos1023

diakonos1023

birdbrain

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week