75

Say, I got this code:

<figure>
 <img src="bunnyrabbit.jpg" width="200" height="150" alt="An image of a bunny rabbit." />
 <figcaption>Bunny rabits are cuddly and fluffy creatures with big ears. They eat carrots.</figcaption>
</figure>

If I don't use any CSS the figcaption will expand the width of the figure element beyond 200px. How can I prevent this?

I know I can force the text inside the figcaption to wrap by specifying the width of the figure element (<figure style="width:200px;">) but I don't really want to use this for each and every image.

5
  • 1
    That’s a very good question. Welcome to Stack Overflow! Jun 30, 2011 at 12:10
  • Thanks. To expand a bit on the issue, what I'm trying to do is float a figcaption to the right of an image: figure { display: block; border: 1px solid #333; } figure img { float: left; } figcaption { float: left; padding: 4px; } If the text inside the figcaption is too long the element is wrapped underneath the image. Same issue, but in a slightly different way. Another issue is that when the figcaption is floated the figure element collapses. Is there a CSS alternative for adding a <br clear /> after the figcaption?
    – rkhff
    Jun 30, 2011 at 13:06
  • I'm not sure I understand - do you want the figcaption to be the same width as the image, but not under the image?
    – robertc
    Jun 30, 2011 at 13:49
  • ah, so I've actually re-stated the question wrongly, at least as far as your actual issue goes. Jun 30, 2011 at 14:15
  • Use max-content instead of min-content.
    – fritzmg
    Apr 9, 2021 at 17:38

7 Answers 7

69

Adding this Code to <figure> and <figcaption> CSS-Attributes helped me with the same problem. Also, it preserves the responsivenes of your images and captions.

figure { display: table; }


figcaption { display: table-caption; caption-side: bottom ; }
  1. Adding display: table; sets the stage.

  2. Adding display: table-caption; alone placed the caption on top of the image, The caption-side property specifies the placement of the table caption at the bottom, top is default.

5
  • 1
    I like that. And once you remove the width and height from the HTML, you can make the image responsive by adding figure img { width: 100%} to Marco's solution or robertc's second solution (table-row). Nov 21, 2013 at 15:37
  • Thanks. This one worked for me. The most popular solution messed up with a treescript (which used tables) I had going, which I could fix, but then I noticed it messed up things on an iPhone 4 (don't know about any other phones), which I didn't know how to fix. But this solution had no issues with anything.
    – Stromfeldt
    Dec 27, 2014 at 7:51
  • 1
    I couldn't get this solution working responsively with either figure img { width: 100%} nor with img { max-width: 100%; height: auto !important; } nor a combination of both jsfiddle.net/jwilson3/9y13rsgy Mar 18, 2015 at 19:51
  • Marco's suggestion is genius. I've read around the web, and tried many strategies and variants. So many mechanisms for alignment, for so many use cases, but odd that this was the first mention of a simple, standardized solution that "just worked." Odd, for what seems like it would be a relatively common need; or maybe not? (I needed to center an image in the viewport, both vertically and horizontally, with a caption below it, responsive across all screens) At any rate, thanks man! Jul 27, 2017 at 0:54
  • Thanks. One can also use display: inline-table to put a row of figures across the screen. Mar 29, 2020 at 16:31
34

This will place the figcaption side by side with the img:

figure {
    display: table;
}
img, figcaption {
    display: table-cell;
    vertical-align: bottom;
}
figcaption {
    padding-left: 4px;
}

Here's an example. However I'm not entirely clear what you're trying to achieve - you say in the question that you want the figure to stay at 200px width, but then you comment that you want the figcaption to appear to the right, which would make the figure wider. If all you want is for the figcaption to be restricted to the width of the image, this should work:

figure {
    display: table;
    width: 1px; /* This can be any width, so long as it's narrower than any image */
}
img, figcaption {
    display: table-row;
}
5
  • Thanks a million, that's sorted. Apologies for the confusion about my comment, I got a bit carried away and realise the two issues are quite different (though both are solved with display:table / table-cell / table-row).
    – rkhff
    Jun 30, 2011 at 16:48
  • There may be problems with this approach - when I use it my images disappear on IE. Apr 27, 2012 at 9:05
  • @AndFinally What version of IE?
    – robertc
    Apr 27, 2012 at 10:03
  • robertc, think it was ie7, ie8 modes of ie9 as well as ie9. I've since found this simpler css works for all except ie7. I'm probably going to have to size the figure to the image width with jquery for that browser. figure { display: table; width: 100px; } .ie7 figure { display: block; width: auto; } Apr 27, 2012 at 10:07
  • @AndFinally OK, thanks - mostly I use Linux so I can't test stuff in IE. Since it seems to work in every other browser however, this is probably an IE bug.
    – robertc
    Apr 27, 2012 at 12:22
26

Another solution: Use Intrinsic width

Just set width: min-content; on the figure element

DEMO (Except for IE)

figure {
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
}
<figure>
  <img src=" http://placehold.it/200x150" width="200" height="150" alt="An image of a bunny rabbit." />
  <figcaption>Bunny rabits are cuddly and fluffy creatures with big ears. They eat carrots.</figcaption>
</figure>

NB: Browser Support is OK, except for IE, however they are considering implementing this

5
  • This should be the first answer. It's the most elegant and correct solution, and with Modernizr it's easy enough to solve the problem differently in IE.
    – rkhff
    Feb 11, 2015 at 22:41
  • 2
    This is almost a perfect solution, except that it doesn't work at all with responsive images. All you need to do to see this break is addimg { max-width: 100%; height: auto !important; } to the demo fiddle, like this: jsfiddle.net/jwilson3/ta17f9Lh Mar 18, 2015 at 19:38
  • @JamesWilson This can be fixed using something like figure { max-width: 100%; } figure > img { max-width: none; }.
    – Archagon
    Feb 7, 2018 at 23:35
  • 2
    @Archagon Not sure how that helps. It causes the image to stop being responsive... jsfiddle.net/jwilson3/Lhrjew6v Would appreciate a working example. Feb 9, 2018 at 15:18
  • 2
    But will this shrink the image too if the caption is narrower? Jan 26, 2021 at 20:43
2

Unfortunately, setting the width of the figure instead of using max-width: 100% means that it won't shrink on narrow (mobile) devices. That is, the images will not be responsive. I resorted to inserting <br /> to break up long captions, but I didn't like it. But this obscure CSS feature seems to work for me:

figcaption { display: run-in; width: 150px }

This keeps the image responsive, even though the caption isn't. You can pick your own caption width. I also added margin: auto; text-align: center; to center the caption on a mobile device.

1

This was really bothering me, because I wanted to find an answer to accommodate an upgrade to HTML5 that would successfully replace my original setup of displaying images and captions- a table with two rows (or one if no caption was available).

My solution might not work for everyone, but so far, it seems to do just fine in the major browsers (O, FF, IE, S, C), as well as being responsive on mobile devices:

figure {
border: 0px solid #000;
display: table;
width: 0;
}

The idea here is that figure is pushed into existence by the width of the img and so doesn't need any kind of direction.

figure img {
display: block;
}

This is used to rid ourselves of the useless, unsightly gap between the bottom of img and the bottom of figure.

figcaption {
text-align: left;
}

Now that figure has been pushed open just wide enough to let img in, figcaption text has only that limited amount of space in which to exist. text-align is not required for this solution to function.

This solution works as well as display: table-caption, but keeps figcaption contained in any border or background value that might need to be set.

1
figure {
    display: inline-grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
}

figcaption {
    width: 0;
    min-width: 100%;
}

demo: https://codepen.io/kartofelek007/pen/rNZWpjp

you may also use this technique for height: https://codepen.io/kartofelek007/pen/LYQJJPR

1
  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Mar 3, 2023 at 10:02
0

Here is an alternative using display inline-table and display table-caption (include the box-sizing) ... https://codepen.io/keith-purtell/pen/LYMWWPd

<div class="container">
  <h3>Adapted from Mihovil Ilakovac</h3>
  <h3>With <code>display:inline-table</code></h3>
  <p>Just when you thought all the table nonsense was gone.</p>
 <figure>
    <img src="http://placehold.it/600x300"
         alt="Amazing really"
  <figcaption>
Lorem ipsum dolor sit amet consectetur adipisicing elit.  Lorem ipsum dolor sit amet consectetur adipisicing elit.  Lorem ipsum dolor sit amet consectetur adipisicing elit.     </figcaption>
  </figure>
</div>

*, :before, :after {
  box-sizing: border-box;
  /* Be sure to include this! */
}
.container { 
  width:960px;
  margin:10px auto;  
}
figure {
  display: inline-table;
  margin: 1em 0 1.3em 0;
  padding: 0em;
  position: relative;
  width: 66%;   
  }  
img {
 display:block;
    }
figcaption {
  display: table-caption;
  caption-side: bottom;
  font-size: .9rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
  margin: 0.7em auto;
  text-align: center;
    }
3
  • Please post a descriptive answer and then references, Sep 4, 2023 at 1:55
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
    – Ben A.
    Sep 8, 2023 at 6:40
  • Sachith and Ben, edited today.
    – user722951
    Sep 9, 2023 at 15:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.