Fill in sidebar downwards

Question

I've practicing how to create a template. My first problem is how to stick the footer at the bottom of the screen if the content is not long enough to fill the whole screen. it was solved using this tutorial http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

My other problem was how to fill in the sidebar all the way down to the footer.

here's the html:

<div id="wrapper">
    <div id="header">
        header here
    </div>
    <div id="container">
        <div id="sidebar">
            sidebar here
        </div>
        <div id="content">
            content here
        </div>
    </div>
    <div class="cls"></div>
    <div id="footer">
        footer here
    </div>
</div>

here's the css:

body{
    padding: 0;
    margin: 0;
}
.cls{
    clear:both;
}
#wrapper{
    min-height: 100%;
    position: relative;
}
#header{
    background-color: #DDDDDD;
    height: 60px;
}
#container{
    padding-bottom: 60px;
    width: 100%;
}
#sidebar{
    background-color: #87CEFA;
    width: 220px;
    float: left;
    padding-right: 20px;
}
#content{
    width: 75%;
    float:right;
}
#footer{
    background-color: #CCCCCC;
    bottom: 0;
    position: absolute;
    width: 100%;
    height: 60px;
}

Opening the image link, the one on the left side is what I have right now....I want the result to be what's on the right side http://www.4shared.com/photo/CoXrUWP2/template.html

A similar question has been asked before. http://stackoverflow.com/questions/712689/css-div-stretch-100-page-height — anuj_io, May 11 '12 at 04:07
check this [tutorial](http://www.subcide.com/articles/creating-a-css-layout-from-scratch/) please it may help you. — khurram, May 11 '12 at 05:37

score 0 · Answer 1 · answered May 11 '12 at 05:23

There are three main ways to achieve this.

One is using tabled layouts, which I would caution against.

The second is to set a background on your #container element. In photoshop, create an image with your 220px sidebar, and use a slice of that to give the appearance of your sidebar extending the entire height of your #container element.

The third is to use JQuery to resize the #sidebar element to the height of your container, something like this would do it:

$("#sidebar").height( $("#container").height() );

score 0 · Answer 2 · answered May 11 '12 at 08:23

0

#sidebar{
    background-color: #87CEFA;
    width: 220px;

    min-height:600px;
    height:auto !important;
    height:600px;   

    float: left;
    padding-right: 20px;
}

Try this and tell if it worked for you?

answered May 11 '12 at 08:23

Jerry Jones

776
1
13
29

Fill in sidebar downwards

2 Answers2