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

#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: