Position a DIV inside another DIV to the bottom

I'm trying to position a DIV inside another DIV on its' bottom part.

When I set the outer divs' height to some absolute heig开发者_如何学Pythonht (i.e - 100px), it works fine. When It's set to percents or isn't set at all - I can't position it.

Here is my CSS:

#left_pane 
{
    float: left;
    margin-left: 21px;
    position: relative;
}

#bottom_pic_wrapper
{
    position: absolute;
    bottom: 0;
}

the #bottom_pic_wrapper is inside of #left_pane and should be aligned to its' bottom.

Any ideas why this won't work for me?

Thanks :)

I made one example here in jsfiddle , see if it useful to you

http://jsfiddle.net/RJXez/

let me know if you need anything else

The following code should help you position at the bottom always

var parentOffset = $('#div').offset();
   var parentsHeight= $('#div').height();
   var childsTopPostion= (parentOffset.top+parentsHeight) - heightOfchildDiv

   $('#childdiv').css('top',childsTopPostion);
   $('#childdiv').css('left',parentOffset.left);

Here is the example code to align vertically bottom inside a div

http://www.templatespoint.com/blog/2009/06/div-valign-bottom/