asked on

How can I make a div grow with its container?

Let's say I have two divs. One div contains another. I know how to make the container div grow with the height of the div inside. How can I make the div inside grow with its container?

mrcoulson

ASKER

/* Relevant CSS */

#contentDiv {
      position: relative;
      margin: auto;
      width: 800px;
      min-height: 736px;
      padding-bottom:35px;
      border-style: solid;
      border-width: 1px;
      background-color: #FFFFFF;
}

#leftNavBox-contentPages {
      position: absolute;
      left: 0px;
      top: 64px;
      padding-top: 5px;
      width: 175px;
      height: 702px;
      background-color: #F2F2E3;
      z-index: 100;
}



<div id="contentDiv">
            
            <div id="leftNavBox-contentPages">
                  
            </div>
            <div id="textHolder">
                  <h2 align="center" class="pageHead">Frederick County Fire & Rescue Department<br />
                        <span class="pageSubHead">Sub Heading for the Page</span></h2>
            </div>
      </div>

Jason C. Levine

Hi mrcoulson,

Sorry, which div do you want to expand as which other div expands? This is either very easy or needs scripting depending on the answer.

mrcoulson

ASKER

leftNavBox-contentPages should grow as contentDiv grows. So, when the stuff inside textHolder pushes the bottom of contentDiv down, leftNavBox-contentPages should stretch to fill the entire left side of contentDiv -- instead of just leaving white space like it does now.

Here's a complicated example with a big, crazy Spry accordion: http://www.co.frederick.va.us/parks/youthsports.aspx.

mrcoulson

ASKER

I'm trying it with jQuery. I can get the height of contentDiv, but I can't figure out how to get leftNavBox-contentPages to have the same height.

$(document).ready(function () {
var divHeight = $('#contentDiv').css('height');
alert(divHeight);
});

ASKER CERTIFIED SOLUTION

Jason C. Levine

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

mrcoulson

ASKER

Hey, I stopped trying the jQuery idea. Instead, I'm just using a background image in contentDiv that repeats and appears to be part of the navigation. The jQuery idea is cool and I enjoyed playing with it, but it never behaved well in IE and I have to move on to another project.

New CSS:

#contentDiv_EXPERIMENT {
      position: relative;
      margin: auto;
      width: 800px;
      min-height: 736px;
      padding-bottom:35px;
      background-image:url(/dry_dock/images/navBackground.gif);
      background-position:left;
      background-repeat:repeat-y;
      border-style: solid;
      border-width: 1px;
      background-color: #FFFFFF;
}

Result: http://www.co.frederick.va.us/parks/youthsports_WORKING.aspx