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><divclass="clearfix"><divclass="left"><!-- float left, margin-right --><imgsrc="http://placehold.it/150x350"alt="placeholder" /></div><divclass="right"><!-- float left --><h5>The headline aligning to the top</h5><divclass="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><divstyle="display:table;"><divstyle="display:table-row;"><divstyle="display:table-cell;padding-right: 20px;"><imgstyle="display:block"src="http://baconmockup.com/300/200"></div><divstyle="display:table-cell;background:green;position:relative;vertical-align:top;"><pstyle="">Some text aligning to the top</p><pstyle="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/