I'm looking for a way to put a child div at the bottom of the parent div. The parent div is placed inside a td which has a dynamic height depending on the content of the row. I tried several attempts including the position: relative and position: absolute solution, but it didn't work because of the dynamic height.
Does anybody has an idea?
Edit:
I'm not using the table for layout. The table is used to display data which is loaded dynamically from the server. I've added a picture which shows how the the two divs should be placed inside the td. The parent div has no specific style at the moment. I don't need to support old versions of IE. The site will be used primarily with latest versions of Firefox, Chrome and Safari.
You should be able to position the child div by using absolute positioning. Set the parent div to relative position, then child to absolute and bottom:0; You will then need to adjust the vertical align of the <td> elements if you want the parent div to also be at the bottom.
your css would be something like -
div#container{width:200px;height:200px;
border:1px solid #666;
position:relative;
}
div#bottom{
width:100px;height:100px;
border:1px solid #f00;
position:absolute;bottom:0;
}
here is a sample jsfiddle - http://jsfiddle.net/LRy6h/
and one where the parent div is also at the bottom - http://jsfiddle.net/LRy6h/1/
and one with resizeable (dynamic) heights - http://jsfiddle.net/LRy6h/2/
and another one to match your updated image - http://jsfiddle.net/LRy6h/3/