CODEWITHSUNDEEP
htmlcss
Xkynar
Xkynar

Reputation: 953

Align bottom wrapped text at the left of an image

Im trying to place some text at the left of an image. Inline-block doesnt suffice because if the string is long enough, it just pushed the image downwards.

The goal is to have a container with a fixed width, which contains the image at the right and text filling the left, which wraps if long enough, while being vertically aligned to the bottom.

I have an initial example using floats: 

.container {
    width: 200px;
}
.container img {
    width: 60px;
    height: 60px;
    float: right;
}
.container h1 {
    font-size: 15px;
}
<div class="container">
    <img src="//placehold.it/60x60"/>
    <h1>Text Text Text Text Text</h1>
</div>

The problem with this is that the text is vertically aligned to the top. I want it to be aligned to the bottom. I've tried everything and i just cant make it work. Any ideas?

Upvotes: 2

Views: 50

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206111

jsFiddle demo

invert the order of your children elements and try this CSS (that emulates the use of Table elements)

.container{
    display:table;
    width: 200px;
}
.container > *{  /* target immediate children */
    display:table-cell;
    vertical-align:bottom;
}
.container img {
    width: 60px;
    height: 60px;
}
.container h1 {
    font-size: 15px;
}
<div class="container">
    <h1>Text Text Text Text Text</h1>
    <img src="//placehold.it/60x60" />
</div>

P.S: SEO (Search-Engine-Optimization) -wise it's not the best idea to have more that one <h1> inside a page. Use h1 wisely ;)

Upvotes: 1

Related Questions