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;
}

score 2 · Accepted Answer · edited Feb 04 '15 at 23:27

2

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;
}

edited Feb 04 '15 at 23:27

Josh Crozier

233,099
56
391
304

answered Feb 04 '15 at 23:08

Bhojendra Rauniyar

83,432
35
168
231

1

@Bhojendra just in the nick of time! Thanks – Welly Feb 04 '15 at 23:13

score 1 · Answer 2 · answered Feb 04 '15 at 23:08

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;
}

Table Cell image and text alignment

2 Answers2