Side by side divs, equal heights
===

I am trying to avoid using layout table in this [jsFiddle][1], and I need to come up with more semantic and generic markup plus CSS.

There is an image in the left column and description in the right column.

There are few challenges, however: we don't know any pixel dimensions, and description may be quite long, which is why we cannot simply float two divs side by side.

Image also needs to be vertically aligned, but we don't know container height or image size.

    <table>
     <tr>
        <td class="image">
            <img src="http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png">
        </td>
        
        <td class="description">
            <p>Left section only needs to be as wide as image is, and we don't know pixel size of the image. It has to be vertically centered.</p>
            
            <p>Right section should take all available space left</p>

            <p>We do not know how much text will be in the right section.</p>            
            <p>We can not use display: table since solutions needs to work in IE7 as well</p>                        
        </td>
      </tr>
    <table>

Please throw any ideas:)


  [1]: http://jsfiddle.net/uWyV9/