html – Make caption take width of image-ThrowExceptions

Exception or error:

Consider the following example:

  <img height="100px" src="">
  <figcaption>Very long caption that should take the width of the image</figcaption>
<div>This text should appear below the whole figure</div>

Is there a css-only approach that makes the caption take the width of the image that would work on the majority of browsers, so no please no bleeding edge css?

EDIT: A solution without intrinsic width (min-content).

EDIT: I added text below the figure that should also be below the caption.

How to solve:

Updated Code

   figure {
      position: relative;
      display: table-caption;


    display: table;
    width: 1px;

Leave a Reply

Your email address will not be published. Required fields are marked *