element inheriting width from a centered above it

Question

Let's say that I have an image that can be a variable width (min:`100px`, max:`100%` [760px]). I also have a `

` element that is to be shown right below the image. I'd like the `

` to end up with the same width as the ``, but I can't seem to find an answer. Here is the code involved in such a scenario jsfiddle: html: ```

``` css: ``` #page { width:760px; /* arbitrary */ } figure img { display: block; border: 1px solid #333; max-width: 100%; min-width: 100px; margin: 0 auto; } figure p { /* ??? */ } ``` Any ideas?

Accepted Answer

You can use `display: table` on the `figure` and set a small width on it. Because it's a table layout it'll then become as wide as the content, in this case the image.

```
figure {
  display: table;
  width: 1%;
}
```

Demo

<p> element inheriting width from a centered <img> above it

Solution

Problem

Related problems