Side panel div won't expand/decrease automatically along with main content

Question

I'm creating a complex website, which has quite a bit of code. So I created a JS Fiddle script that re-creates the problem I'm facing.

In short, we have a main container, and in the container is a left column floated to the left and the main content column flatting to the right.

As you can see in the example, the #sideColumn is not expanding to cover 100% of the height of the #container as the #mainColumn grows. The "blue" should automatically extent from the top (as shown) all the way to the bottom of the container as the #mainColumn grows/decrease. In other words, the #sideColumn should always equal the height of the container (automatically).

Here's the Fiddle - what am I doing wrong? http://jsfiddle.net/dLyfD/

Possible duplicate of http://stackoverflow.com/questions/4804581/css-expand-child-div-height-to-parents-height, http://stackoverflow.com/questions/384145/css-expand-parent-div-to-child-height, and http://stackoverflow.com/questions/1122381/how-to-force-child-div-to-100-of-parents-div-without-specifying-parents-heigh — j08691, Jan 21 '12 at 20:35
True, this question has been asked to death, on SO and everywhere else — Ninja, Jan 21 '12 at 20:39

score 0 · Accepted Answer · edited Jan 11 '20 at 21:54

Could do something like this:

HTML:

<div id="container">
    <div id="sideColumn"></div>
    <div id="mainColumn">
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>      
        <div class="test"></div>    
        <div class="test"></div>    
    </div> 
</div>

CSS:

#container {
    width:500px;
    overflow:hidden;
    border:1px solid #CCC;
    position: relative;
}
#sideColumn {
    padding:20px 0;
    width:200px;
    overflow:hidden;
    background:blue;
    position: absolute;
    height: 100%;
}
#mainColumn {
    padding:20px 0;
    float:right;
    width:300px;    
    background:yellow;
}
.test {
    width:250px;
    height:50px;
    margin:15px 25px;
    background:red;
}

http://jsfiddle.net/dLyfD/1/

Side panel div won't expand/decrease automatically along with main content

1 Answers1