How to get a div positioned at the bottom of a table

Question

I'm not really sure what I need here but I want to position a div at the bottom of a nested table.

I have an outer table that is 100% wide and no height attribute. I have another table within that outer table where I am using the div. I want the div content to rest on the bottom of the inner table. I currently have the div in a <td> tag.

I've tried to use position:absolute; bottom:0; left:0; but it puts the div and its content at the very bottom of my screen.

How can I do this?

BTW: I know that I should be using 100% css on this project but I'm making a gradual transition. :)

Here is my code for the div

#messageBox {
width:95%;
height:35px;
margin:10px;
padding:10px;
font-family:Arial;
font-size:18px;
}

Here is the table code

<table cellpadding="0" cellspacing="0" border="0" style="width:60%;margin-left:auto;margin-right:auto;margin-top:30px;border:0px solid">
 <tr>
   <td colspan="2" style="height:85px;"><div id="messageBox">test</div></td>
 </tr>
</table>

Answer 1

Oh the joys of working with tables. It seems that this won't work unless you set the display property of the table to block

You can try giving the outer innermost (my eyes failed me, sorry) table this style:

position: relative;
display: block;

You'll also need to add back in the position: absolute (I see you've taken that out, that is actually the correct method to use for this)

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

Do remember that this will change how the table works, and will probably break your site. See: http://jsfiddle.net/5xTXU/

Answer 2

You need to set the <td> element in question to position: relative;. This way any absolutely positioned element will be positioned relative to it.

Answer 3

#messageBox {
    width:95%; /* wrong calculation when you add with margin/padding makes overflow */
    height:35px;
    margin:10px;
    padding:10px;
    font-family:Arial;
    font-size:18px;
    border:1px solid red;
}

<table>
    <tr>
      <td colspan="2" style="height:185px; border:1px solid black; vertical-align:bottom;">
        <div id="messageBox">test</div>
      </td>
    </tr>
</table>

I changed your td's height from 85px to 185px to make it obvious.

Preview:

Request (not overflow):

I'm using additional wrapper.

<table>
    <tr>
      <td colspan="2" style="height:185px; border:1px solid green; vertical-align:bottom;">
        <div style="overflow:hidden; border:1px solid red;">
            <div style="border:1px solid black; float:left; width:100px; margin:10px; padding:0px;">Test</div>
        </div>
      </td>
    </tr>
</table>

Preview: