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

**URL:** <https://forum.kirupa.com/t/making-a-sidebar-div-100-the-height-of-the-content-div/203006>\
**Category:** web dev\
**Created:** [October 6, 2006, 2:45pm UTC](https://forum.kirupa.com/t/making-a-sidebar-div-100-the-height-of-the-content-div/203006 "2006-10-06T14:45:05Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![fasterthanlight](https://avatars.discourse-cdn.com/v4/letter/f/ecc23a/32.png) [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)\
**Post date:** [October 6, 2006, 2:45pm UTC](https://forum.kirupa.com/t/making-a-sidebar-div-100-the-height-of-the-content-div/203006/1 "2006-10-06T14:45:05Z")

</div>

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:

```auto

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;
}

```