带有字幕叠加的CSS Box，最佳做法？

Question

This is some html and css, you can see what it does:_ (The first box is really the one that matters)

http://jsfiddle.net/rcGsH/2/

The problem is to make this work properly with the image there, I have to use some tricks to get it to work properly that don't seem very good... like

floating the img left or right so it's not really taking up space.. (is there another way around this? or is it fine how i'm doing it?)

.ad img {
height: 175px; width: 175px;
float: left;
}

And making another wrapper div around the text inside the ad_info div and setting it to bottom: 175px so that the text stays in the transparent part... is there another way to this as well?

If anyone has proper fixes to these problems or these are fine please tell...

OR I have another idea where i could put the image as a background image with JQuery, (since the image will come from php), i have a good idea of how that would work but could anyone tell me which solution is better?

Thanks!

Answer 1

There is a lot of ways to do this, you are doing right (maybe some extra divs), but I thinks this is what you are looking for:
Boxes, images and captions
Like an extra, they use a little bit jquery, to animate the boxes ;)