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"> </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"> </div>
<div style="clear:both"> </div>
</div><!-- #wrapper -->Thanks in advance for your time and suggestions!
Rich
