Set html figure-width to same as width of image it contains

css, html, image

Solution

Add `display:table` to `figure` css like this

figure 
{
    display:table;
    border: 1px solid red;
}

JS Fiddle Demo

Problem

When having a image inside a figure-tag, the figure width is 100%. How do I make so that the the figure always will have the same width as the image? Here's my current code: HTML: ``` <figure> <img src="http://www.google.com/images/srpr/logo3w.png" alt="" /> </figure> ``` CSS: ``` * { margin: 0; padding: 0; } figure { border: 1px solid red; } img { border: 1px solid blue; vertical-align: top; } ```

Original source