Question

Consider the following table structure:

<table style="width:150px;">
 <tr>
  <td>some dynamicly generated content that can wrap several lines</td>
  <td valign="bottom"><img ... /></td>
 </tr>
</table>

How do I get this effect using CSS (i.e. that when the content in the first TD takes more lines,
the tables grows vertically and the image “drops” to the bottom)

Answer 1

Try display:inline-block You’ll need a small hack for older browsers (Easily google-able), but it should accomplish what you need:

http://jsfiddle.net/4vYHa/

.content{
    width:150px;
    display:inline-block;
}
.bottom-image{
     display:inline-block;
}

<div class="wrapper">
    <div class="content">
        <p>Lorem ipsum</p>        
    </div>
    <div class="bottom-image">
        <img src="http://placehold.it/250x150">
    </div>
</div>

Edit: If you then need the image to stick to the top you would just add vertical-align:top;:

.bottom-image{
    display:inline-block;
    vertical-align:top;
}