29
Sep
2014

HTML5 - Figure and Figcaption

posted Monday, September 29th 2014 at 6:33 PM by

Recently when I did the write up on how to zero the M16A1 series rifle, I got into a serious display issue with some HTML5 using <figure> and <figcaption> where their widths wouldn't match up. Arg! If you're in a similar ship, here's what I did...

Here's the CSS for the example:

figure {
    display: table;  /* this was the fix */
}

/* the following is just to style the caption */
figcaption {
    border-left: 8px solid #ccc;
    padding: 8px;
    margin-top: 8px;
    background-color: #f0f0f0;
    max-width: 100%;
    font-style: italic;
}

And the HTML:

Pants the cat gets revenge on a vacuum
Humpty Dumpty was pushed! Pants gets revenge on the robot vacuum.

Here's the result:

Pants the cat gets revenge on a vacuum
Humpty Dumpty was pushed! Pants gets revenge on the robot vacuum.

The fix was to add a display: table; style to <figure> in order to have the width of the caption match the width of the image. So if you're having the same problem, I hope that helps. Enjoy!

Share This:

Tags:

Comments:

View (0) Comments Post a Comment
  • Replying to Adam Konieska on HTML5 - Figure and Figcaption