Child div at the bottom of parent div inside a table cell - html

Question

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.
layout http://img29.imageshack.us/img29/5271/e49.png

Answer 1

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/

Answer 2

I found another way to solve the problem. I set the height of the corresponding tr as well as the height of the td and parent div to 100%. Here is a code snippet:
html + css:
<tr style="height: 100%;" ng-repeat="order in orders">
<td style="height: 100%;" >
<div style="height: 100%; position:relative;">
<span>PARENT - SOME TEXT</span>
<div style="position:absolute; bottom: 0;" >CHILD</div>
</div>
</td>
</tr>

Answer 3

Sorry, but I have to write an answer instead of adding a comment (not enough reputation).
Sounds as if you are using a table for layout - that's no good idea! ;-)
Furthermore it would be helpful, if you post the relevant HTML and CSS code, or even better setup a jsFiddle.
How do you style the parent DIV?
There is no cross-browser way of setting it to the height of the TD (using CSS only). The "modern" way might be using 'flexbox'. But it depends on the Browsers (and versions) you have to support and the layout you would like to achieve.
Using 'position: relative' on table elements does also not work, because the behaviour for this is 'undefined'.
So to really give you some good advice there are some informations missing.