aligning text to top in a table cell

Question

I'm trying to get my text to align with the top of the image in the cell beside it. Vertical-align top doesn't seem to be working? I think currently it's trying to center itself relative to the other cell. Maybe there's a better way to do this with floats or something?

Here's the CSS:

table#body1 {
    padding: 0px;
    vertical-align: top;
    margin-bottom: 10px;
    margin-top: 5px;
}
td#images { 
    width: 30%;
}
td#text {
    width: 70%;
    padding-left: 15px;
    text-align: justify;
    vertical-align: top;
}

And the HTML: (all the divs are inline-block elements if that makes a difference)

<table id="body1">
<tr>

<td id="images"><img class="halfimg1" src="titania2.jpg" alt="Queen Titania"><br></td>
<td id="text">
<div id="header">Wander in these woods.</div><br>
This is some Text.<br>
<div id="caption"><br>This is my caption.</div>
</td>
</tr>
</table>

Thanks in advance for helping!

Answer 1

Add vertical-align: top; to td#images as well.

Answer 2

Keeping in mind the comment I made above, you probably want to move the vertical-align: top; rule from td#text to td#images

jsFiddle example