Question

I have images with captions, like so:

<figure class="imageBoxShadow">
    <img alt="Alt-Text" src="http://lorempixel.com/280/375">
    <figcaption>A Caption for this image</figcaption>
</figure>

The class “imageBoxShadow” puts a boxShadow (who’d have guessed?) around the image. I put it on the figure, because the caption is supposed to go inside the border. Which works fine as long as the caption is smaller then the image is wide.

However, if I have a small Image and/or a long caption the caption will extend the figure element as far as possible, which looks stupid.

Of course I could restrain the figure element by adding a hardcoded style to set the width:

<figure class="imageBoxShadow" style="width: 100px">
    <img alt="Alt-Text" src="http://lorempixel.com/100/150">
    <figcaption>Using a hardcoded style to restrict the figure element works but feels stupid.</figcaption>
</figure>

but that feels stupid and not very convenient in a CMS-context.

Is there a better way to do this?

Have a jsFiddle link to check it out: http://jsfiddle.net/Sorcy/h5sNB/

Answer 1

add

figure {
  display: table;
  width: 1px;
}

to your css [as proposed here ] and you’re done.