Prevent paragraph from increasing the width of a floated parent

Question

I often find myself using code blocks for inline article images like the following:

...article text.
<div class="article-image right" style="width: 250px;">
    <img src="..." width="250" alt="" />
    <p class="caption">Potentially long image caption</p>
</div>
More article text...

Or, the more succinct HTML5 version:

...article text.
<figure class="right" style="width: 250px;">
    <img src="..." width="250" alt="" />
    <figcaption>Potentially long image caption</figcaption>
</figure>
More article text...

Since I use a CMS that processes images on the fly, I've been defining the size of the image (250px in this case) dynamically, and I've also been applying that size restriction to the parent element that contains both the img and its caption. This way, the caption never increases the size of the parent element beyond the defined width of the img tag.

My question is if there is some CSS trick I can apply to one of the elements that will accomplish the same thing without manually defining the width? Some way to prevent the captions from expanding their parent element in width, yet allowing them to influence the height? Of course the parent element's width still needs to adapt to the img's width...

Answer 1

To stop children elements from affecting parent width apply this to the child:

    min-width: 100%;
    width: 0;

This gets around solutions using absolute positioning.

For vertically lining them up, also use:

    vertical-align: top;

JSFiddle: http://jsfiddle.net/ETkkR/87/

Answer 2

CSS code to div or figure element is alone enough.

style="width: 250px; 
**max-width:250px;"**

This will set static width to the div or figure tag even when the width of the image is higher