Table Cell image and text alignment

Question

I have a three column layout where sometimes I want to have text in one column adjacent to an image in another column. My issue is that when I insert an image into one of the columns, the text in the adjacent column(s) positions itself adjacent to the bottom of the image in the adjacent column rather than at the top of the column as one would expect.

My basic structure:

<div class="fwcol">
    <div class="col">
        <div class="ttl">
        <img src="images/placeholder.png" width="571" height="540">
        <p>Bla Bla Bla </p>
        </div><!--ttl-->
        <div class="otr">Column 2 Content
        </div><!--otr-->
    </div><!--col-->
</div><!--fwcol-->

CSS:

.fwcol {
    float: left;
    width: 966px;
}        
.ttl {
    display: table-cell;
    padding: 20px;
    width: 571px;
    background: #FFF;
}
.col {
    width: 966px;
    display: table;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 20px;
}

Answer 1

You did not use vertical-align to the div where you're applying table-cell:

.ttl {
    display: table-cell;
    vertical-align: top;
    padding: 20px;
    width: 571px;
    background: #FFF;
}

Also, in image itself you need to use vertical align:

.ttl img {
    display: inline-block;
    vertical-align: top;
}

Answer 2

It's doing that because .ttl's display is set to table-cell. You could add vertical-align: top to the element in order to correct this behavior:

.ttl {
    display: table-cell;
    vertical-align: top;
    padding:20px;
    width: 571px;
    background: #FFF;
}