CSS to keep div to the size of content

I have code like this:

<div class='outer'>
<div class='imgwrapper'><img /></div>
<div class='caption开发者_如何学编程'>This is a long caption that should wrap...</div>
</div>

What I want is for the outer div to be the width of the image so that the caption under it wraps to the width of the image.

The images are all different sizes but the size cannot be accessed in code to give absolute pixel sizes. The css has to work for different sizes.

I cannot change the structure of the divs.

Can this be done?

Try this:

HTML

<div class="box">
    <img src="http://static.howstuffworks.com/gif/moon-landing-hoax-1.jpg" />
    <div class="caption">
        Caption
    </div>
</div><br />

<div class="box">
    <img src="http://static.howstuffworks.com/gif/moon-landing-hoax-1.jpg" style="width:200px; height:200px;"/>
    <div class="caption">
        Caption
    </div>
</div><br />

<div class="box">
    <img src="http://static.howstuffworks.com/gif/moon-landing-hoax-1.jpg" style="width:75px; height:75px;"/>
    <div class="caption">
        Caption
    </div>
</div>

CSS

.box {
    overflow:hidden;
    background-color:#ddd;
    display:inline-block;
}

img {
    padding:10px;
}

Demo

http://jsfiddle.net/andresilich/8Bsgg/1/