align a text relative to the bottom of a floated image

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

I'm trying to position something with CSS, to have the equivalent of:

    <td><img src="foo.jgp"></td>
    <td valign=bottom>Label</td>

This is trivial with a table, and I fail to see how css can achieve the same
result: a picture, and right next to it, a few words that align to the
bottom of the pic.

It's for a virtual art gallery and I have many pairs of such image+label,
and the images have different widths.

I tried:

<div class=picandtext>
  <img src="foo.jpg">
  <div class=texttopic>Label</div>

And the style:
div.picandtext {clear: both;}
div.picandtext img {float: left;}
div.picandtext div.texttopic {vertical-align: bottom}

But one problem is that the image is float'ed, it doesn't take any space and
the label doesn't align to its bottom.

Thanks for your insights.

Site Timeline