Question

I have the following HTML:

<div class="wrapper">
  <div class="label">
    foor bar baz
  </div>
  <img src="...">
</div>

Yes, I know that div with class “label” should be a label.

The simple question is: how do I ensure that the label is always exactly as wide as the picture and never wider?
The width of the picture and the content of the label are unknown. When the content of the label is longer than the width of the image, it should break to the next line.

Right now, I have “display: inline-block” for the wrapper and everything looks fine when the text fits in the label. When the text is longer, it doesn’t break, though, but makes the label longer than the image.

I guess there’s a simple solution for this but I’m just not seeing it.
Any help appreciated!

Answer 1

an element can’t be larger than it’s parent so if you put the img tag inside the div it will never be larger.

<div class="wrapper">
  <div class="label">
    foor bar baz
    <img src="...">
  </div>
</div>