How to fit div to image?

Question

I have a fluid image inside a div, under the image there is an other div with text. Is it possible for the #text div to get same size like the image?

<div id="container">
    <img src="http://dummyimage.com/300x200/c7c1c7/fff.jpg">
    <div id="text">Several standard dimensions are included in dummyimage.com including ad sizes and screen resolution sizes.</div>
</div>


#container {
    display: inline-block;
    height: auto;
    max-width: 100%;
    position: relative;
}

img {
    max-width:100%; max-height:100%;
}

FIDDLE

Answer 1

Seeing as the #container is relatively positioned, you could position the #text absolutely, to prevent it from stretching the #container:

#text {
    /* remove from flow, prevents from stretching container */
    position: absolute;
}

http://jsfiddle.net/HUsRm/5/

This will, of course, also prevent vertical stretching, and not push following content down. This might be unwanted?

Answer 2

You can make this work by having only this css:

#container
{
    display:table-caption;
}

Fiddle