Align text to image (CSS)

Question

How it is now: http://jsfiddle.net/cSazm/

How I want it to be: http://jsfiddle.net/mhprg/

The problem with the second variant is that I don't know the exact size of the image, so the fixed CSS margin would not work :( Also there's an extra ugly div..

Are there any other solutions?

Answer 1

You can float the image, and then style the div as a table cell, which will automatically stretch to 100% the available width.

HTML:

<img src="http://lorempixel.com/g/80/80/" alt="" /><div>Text</div>

CSS:

div{
    display:table-cell;
}    

img{
    float:left;
}    

↪ View this example at JSFiddle