1

I'm creating a webpage. But I have something in my mind but can't reproduce it in HTML/CSS.

I have an image and a figcaption. Both are in a figure tag. I want the figure tag to be the same size as the image. But the figcaption can't be larger than the image, so the text should be wrapped.

This is the html code: 

<figure>
    <img src="img.gif" alt="Logo" />
    <figcaption>Some random text in a random figcaption</figcaption>
</figure>

CSS code:

figure {
    display: inline-block;
    padding: 15px;
    background-color: #C7C7CC;
}

figure > figcaption {
    padding-top: 10px;
    font-size: 1.2em;
}

Screenshot of the result: http://gyazo.com/b0b67b5869689c5e9ca40f26d72ede1f

But I want the figcaption element to not be greater than the img element.

I know I could create an id for every image and figcaption to set the width equal to the image. But I want to be able to add more images with the above HTML code block and the css should just do the magic. I think I can fix it with javascript. But I want to know if it is possible with CSS and if that's the case, how I can do it.

Thomas Sebastian
  • 1,582
  • 5
  • 18
  • 38
Bart C
  • 23
  • 4
  • Is this what you're looking for? http://stackoverflow.com/questions/617386/limit-text-to-the-width-of-sibling-image-auto-width-in-css – Yvon Aug 14 '14 at 01:03
  • @Yvon I tried the first answer but it didn't work, but the second one did. Thanks! – Bart C Aug 14 '14 at 01:07

1 Answers1

2

I did a very quick research and found that display: table applied to the figure could be the solution.

I tried your HTML with a simpler CSS such as this:

figure {
  display: table;
}

figcaption {
  padding-top: 15px;
  font-size: 16px;
  display: table-caption;
  caption-side: bottom;
}

See this fiddle: http://jsfiddle.net/dh5x229p/2/

Scintillaluz
  • 36
  • 3