How to align text at bottom in <p> with <img>?

Question

This is the code. I want to align text at bottom

<p style="background:#eee;font-size:1.3em;color:#022662;height:116px">
   <img width="174" height="116" src="#" style="margin-right:10px;float:left">
   <strong>Text 1</strong>, <br>
   text 2, <br>
   text 3 
</p>

added example to test http://jsbin.com/ubiji/2

Answer 1

Your question isn't clear but maybe you want the text to act like a block and have "text 3" the part lined up with the image?

If so, this should work:

    <p style="background:#eee;font-size:1.3em;color:#022662;height:116px;">

        <img width="174" height="116" src="#" style="margin-right:10px; vertical-align:bottom">
       
        <span style="display:inline-block; background: #ff6; vertical-align:bottom">
            <strong>Text 1</strong>, <br>
            text 2, <br>
            text 3
        </span>
    </p>

Answer 2

There should be a simple solution to this. There is not.

Some here say vertical-align:text-bottom or just vertical-align:bottom. Like this:

<p style="background:#eee;font-size:1.3em;color:#022662;height:116px;">
    <img width="174" height="216" src="#" style="vertical-align:bottom;margin-right:10px;">
    <strong>Text 1</strong>, <br>
    text 2, <br>
    text 3 
</p>

This works as you intend if you only have one line of text, since it's the first line of text that is aligned with the image. This is because <img /> is by default display:inline;. If you only have one line, go for it.

If you need a more robust solution, use positioning.

<p style="background:#eee;font-size:1.3em;color:#022662;height:116px;position:relative;">
    <img width="174" height="216" src="#" style="margin-right:10px;">
    <span style="position:absolute;bottom: 0;">
        <strong>Text 1</strong>, <br>
        text 2, <br>
        text 3 
    </span>
</p>

This works in IE7 Standards mode, and IE8 Standards mode. Also in Firefox etc... Note that the left-position is left out, to just default to where it should be without position:absolute;

Due to the fact that hasLayout isn't true in Quirks mode in IE6, 7 and 8, the solution doesn't work either. You have to give it 'layout' by giving it a dimension with height or width, or just fall back to the old faithful zoom:1;

<p style="background:#eee;font-size:1.3em;color:#022662;height:116px;position:relative;zoom:1">
    <img width="174" height="216" src="#" style="margin-right:10px;">
    <span style="position:absolute;bottom: 0;">
        <strong>Text 1</strong>, <br>
        text 2, <br>
        text 3 
    </span>
</p>

There you have it.