How to make text vertical align to the bottom in floating divs?

Question

I have been trying to solve this for a couple of hours now and I cannot get it to work.

I have a floated left & right div. The right div contains an image and the left div contains text. The image & text swap left & right according to the users preference, which is why i am using float.

How do I position the text to be at the bottom of the wrapper but next to the image?

I have a visual display below:

Here is my html code:

<div class="wrapper">
    <div class"text">Text aligned at bottom</div>
    <div class="photo"><img id="photograph" src="" width="140px" height="140px" /></div>
</div>

Is it ok to add addition html? – Stickers May 04 '15 at 01:04 — Stickers, May 04 '15 at 01:04
Yes. Whatever you think is necessary to solve this issue. – user1261774 May 04 '15 at 01:05 — user1261774, May 04 '15 at 01:05

Stickers · Accepted Answer · 2015-07-25T01:16:03.630

Added a <div class="inner">, and set it as display:table-cell + vertical-align:bottom, see the following demo and snippet.

Edit: also added calc() to make the photo div is only as wide as the width of the photo and the text div takes up all of the remaining width automatically.

JsFiddle Example

.wrapper {
    border: 1px solid blue;
    overflow: auto;
}
.wrapper .text {
    float: left;
    width: calc(100% - 140px);
}
.wrapper .photo {
    float: right;
}
.wrapper .inner {
    display: table-cell;
    height: 140px;
    vertical-align: bottom;
}
.wrapper .inner img {
    display: block;
}

<div class="wrapper">
    <div class="text">
        <div class="inner">Text aligned at bottom, text aligned at bottom, text aligned at bottom, text aligned at bottom, text aligned at bottom.</div>
    </div>
    <div class="photo">
        <div class="inner"><img id="photograph" src="//dummyimage.com/140" /></div>
    </div>
</div>

How to make text vertical align to the bottom in floating divs?

1 Answers1