CODEWITHSUNDEEP
htmlcsstablecell
Welly
Welly

Reputation: 315

Table Cell image and text alignment

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

Upvotes: 3

Views: 1973

Answers (2)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

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

Upvotes: 2

Josh Crozier
Josh Crozier

Reputation: 240878

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

Upvotes: 1

Related Questions