Question

I have css code to do layout. i have basic header panel, footer, left panel, and center panel. I want to have left panel and center panel automatically stretch to bottom(blue and gray part all the way to black footer). is there any way to do that?
following are my codes.

thank you,

body {
    text-align: center;
}
.wrapper {
    position: relative;
    width: 960px;
    font-size: 0.9em;
    margin: 0 auto -20px;
    text-align: left;
}
.header {
    height: 125px;
    background-color:purple;
}
.footer {
    position: relative;
    width: 960px;
    margin: 0 auto;
    background-color:black;
}
.footer a {
    color: #fff;
    text-decoration: underline;
    border: 0;
}
.footer p {
    position: absolute;
    left: 0;
    bottom: 4px;
    width: 960px;
    padding: 0;
    color: #fff;
    font: 0.8em arial,sans-serif;
    text-align: center;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -20px; /* the bottom margin is the negative value of the footer's height */
    background-color:yellow;

}
.footer, .push {
    height: 20px; /* .push must be the same height as .footer */
}
.leftPanel{
    width:200px;
    background-color:blue;
    float:left;
    height: 100%;   
}
.centerPanel{
    width:760px;
    background-color:gray;
    float:left;
    height: 100%;   

}

dl,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,div,p,blockquote,fieldset,legend,input,select,textarea
{ margin:0; padding:0 }

     


    <div class="wrapper"> 

        <div class="header"> 
            <h1>header</h1> 
        </div> 

        <div class="leftPanel">
            leftPanel

        </div>
        <div class="centerPanel">
            center Panel
        </div>
        <div class="push"></div> 
    </div> 

    <div class="footer"> 
        <p>footer</p> 
    </div> 
</body> 

Answer 1

This is a very work-aroundish solution, but here it goes: http://jsfiddle.net/Us5Cn/