Position Text At Bottom, But Letting It Stay In Document Flow

I have the following problem: There's an image floating left and a margin to the right. Next to it, there is a div containing a headline and a text (I don't know any height-values

Solution 1:

try using display: inline-block; on both floating elements and the text element that you want aligned to the bottom.

Then put the property vertical-align: bottom; on the text element you want aligned to the bottom.

Solution 2:

I assumed you can make the right column a fix height, since the left column & right are the same in your image example.

I made a jsfiddle for your convenience: http://jsfiddle.net/hLPXM/

Alternately, here is what I did, based on your original code:

<h4>A headline, that isn't involved</h4>
<div class="clearfix">
    <div class="left"> <!-- float left, margin-right -->
        <img src="http://placehold.it/150x350" alt="placeholder" />
    </div>
    <div class="right"> <!-- float left -->
        <h5>The headline aligning to the top</h5>

        <div class="bottom-text">
            <p>
                Some text aligning to the bottom
            </p>
        </div><!-- .bottom-text -->
    </div>
</div>

Note I added a .bottom-text class around the <p> that you want to align bottom.

Here is the CSS for the divs to float properly, etc. Note the position:relative; :

.left {float:left; margin-right:20px;}
.right {float:left; background:#eeddff; /*background to see div*/}

.left, .right {height:350px; position:relative;}

And more importantly the text starting from the baseline:

.bottom-text {
    position:absolute;
    bottom:0;
}

​

​

Solution 3:

Here is a solution for you, using display: table, relative and absolute positioning:

<div>
    <h4>A headline, that isn't involved</h4>
    <div style="display:table;">
        <div style="display:table-row;">
            <div style="display:table-cell;padding-right: 20px;">
                <img style="display:block" src="http://baconmockup.com/300/200">
            </div>
            <div style="display:table-cell;background:green;position:relative;vertical-align:top;">
                <p style="">Some text aligning to the top</p>
                <p style="position:absolute;bottom:0;">Some text aligning to the bottom</p>
            </div>
        </div>
    </div>
</div>​

It does not rely on any fixed heights, and adopts to the height of the image automatically.

jsfiddle.net/EUvXh/