Making a sidebar div 100% the height of the content div

programming web dev
1

Ok so I have a main container div, and within that container div there are other block level divs,

#header

#childSidebar

#childContent

#footer

childSidebar floats left while childContent floats right to make a two column layout. The problem I encounter is that childSidebar won’t stretch to the full height of childContent unless i give it an absolute pixel height which is unreasonable because my childContent varies in height from page to page

height: 100% only seems to make the sidebar 100% of the height of whats within the sidebar.

I’m drawing a blank here,

here’s all the pertinant code i’m using:



body, html
{
    background-color: #F4F4F4;
    margin: 0;
    padding: 0;
    background-image: url(/nbsa/images/bg.jpg);
    background-repeat: repeat-x;
    background-position: top;
    font-family: Arial, Verdana, sans-serif;
    font-size: 12px;
    color: #000000;
    height: 100%;
    width: 100%;
}


#container
{
    position: relative;
    margin: 0 auto;
    width: 760px;
    border: 1px solid #CCCCCC;
    border-top: none;
    background-color: #FFFFFF;
}

#header
{
    position: relative;
    width: 760px;
    background-color: #545151;
    border-bottom: 1px solid #CCCCCC;
}

#childContent
{
    position: relative;
    float: right;
    width: 486px;
    padding: 30px 30px 20px 20px;
    height: 100%;
}

#childSidebar
{
    position: relative;
    height: auto;
    width: 204px;
    background-image: url(/nbsa/images/sidebarBG.jpg);
    barkground-repeat: repeat-y;
    padding: 30px 0px 0px 15px;
    margin: 0px;
}


#footer
{
    background-color: #545151;
    color: #FFFFFF;
    font-size: 11px;
    clear: both;
    height: 25px;
    padding-top: 10px;
}