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...

Daley

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/

Crackling

I think I meant to answer this similar issue on a different page, and then link the answer here for reference... Whoops! Glad I could help though. Edit Yeah I originally meant to answer this topic: #10692441 – Crackling

Ahh, that explains the mismatched classes. :p – Daley

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

Area

The main part here is max-width keep that the width you want. – Area

Perhaps I was not clear enough - the point of this is to be able to avoid adding in widths into the HTML. Images can be all sorts of various widths, and I'm wondering if there's a solution that covers all width situations. – Daley

Set max-width attribute to either of the elements this makes you simple – Area

No, that doesn't help, sorry. – Daley

Answer 3

You can clamp between min-content and fit-content like so:

figcaption {
  max-inline-size: min-content;
  min-inline-size: fit-content;
}

Below is a working demo that arbitrary shrinks the container down to 30ch.

.page {
  align-items: center;
  display: flex;
  justify-content: center;
  background: rebeccapurple;
}

.container {
  background: white;
  border: 1px solid gray;
  min-inline-size: 30ch;
  max-inline-size: 90%;
  margin: 1em;
  padding: 1ex;
}

.text {
  margin: 0;
  max-inline-size: min-content;
  min-inline-size: fit-content;
}

<div class="page">
  <div class="container">
    <p class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna
      aliqua. Ut enim ad minim veniam, quis nostrud exercitation
      ullamco laboris nisi ut aliquip ex ea commodo consequat.
      Duis aute irure dolor in reprehenderit in voluptate velit
      esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
      occaecat cupidatat non proident, sunt in culpa qui officia
      deserunt mollit anim id est laborum.
    </p>
  </div>
</div>

Livraison