Extend the height of the div # leftcontent with the div # wrap

See the complete code for this page this link, and in the end result.

My div # wrap (blue) contains the entire contents of the page, I have several divs inside it and one of them is the # leftcontent would like to stay with the height at the bottom of the page (even the # wrap div.开发者_如何学C

Basically, the red line (at bottom of page) should sit on the blue line (at bottom of page)

Add the following css rule:

div#wrap {
    /* the other css rules for this selector */
    position: relative;
}

And replace the css for div#powered with this:

div#powered {
    font-size: 10px;
    position: absolute;
    bottom: 2px;
    right: 2px;
}

Live test : http://jsfiddle.net/moeishaa/VB8L9/

Setting the containing element (in this case #wrap) to position:relative and then setting position:absolute; bottom:0; left:0 will work, but will require you to set a height element of some kind to your #wrap div.

It's because your div#powered has a clear:both on it. An alternate way to position that div would be to use positioning (make sure div#wrap has position:relative):

div#wrap 
{
    position:relative;
}
div#powered 
{
   position:absolute; right:0; bottom:0; 
}
.clear, div.address /* removed div#powered */
{
    clear:both;
}

See example →