Constraining a <div>'s width to a sibling <div>'s width - css

Question

I have some dynamically generated charts that each get placed in a container, floated left:
<div class="container">
<div class="chart"> ... </div>
</div>
<div class="container">
<div class="chart"> ... </div>
</div>
<div class="container">
<div class="chart"> ... </div>
</div>
The above, for example, produces
I wanted to add captions beneath each chart, so I added sibling <div>s, like this:
<div class="container">
<div class="chart"> ... </div>
<div class="caption"> ... </div>
</div>
<div class="container">
<div class="chart"> ... </div>
<div class="caption"> ... </div>
</div>
<div class="container">
<div class="chart"> ... </div>
<div class="caption"> ... </div>
</div>
This didn't work because the parent's width, not having been specified, would grow with the caption text:
So, how can I constrain the caption <div> width to the chart <div> width?
The chart is generated by an external jQuery library, and although I could use jQuery to obtain the generated chart's width and set the caption <div>'s width to that value, I'd prefer a CSS-only solution. I'd also like to avoid injecting the caption <div> into the chart <div> (though, I'm not sure how that'd help anyway).
The result I'm looking for looks more like the following (example faked via forced linebreaks):
Thanks in advance for any advice.

Answer 1

you can do this by applying absolute position without any positional attributes (top, bottom, left, right)
Tested only on Chrome, FF, and IE10
.container {
position: relative;
}
.caption {
position: absolute;
}
http://jsfiddle.net/YzQcs/