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

Question

Let's say that I have an image that can be a variable width (min:100px, max:100% [760px]). I also have a <p> element that is to be shown right below the image. I'd like the <p> to end up with the same width as the <img>, but I can't seem to find an answer.
Here is the code involved in such a scenario jsfiddle:
html:
<div id='page'>
<figure>
<img src='http://www.myimage.com/img.jpg'/>
<p>Hi there. I am some text. I would like to start where the image starts :(</p>
</figure>
</div>
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?

Answer 1

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

Answer 2

It is inheriting from #page div. not from the image. Please see the same fiddle updated.
But, You can control individual elements. You have to specify how you wish it to look like.

Answer 3

Here is the FIDDLE that I made using
HTML:
<div id='page'>
<figure>
<img src='http://www.iiacanadanationalconference.com/wp-content/uploads/2013/01/test.jpg'/>
<figcaption>Hi there. I am some text. I would like to start where the image starts :(</figcaption>
</figure>
</div>
CSS:
#page {
width:760px; /* arbitrary */
}
figure{
padding-left: 10%;
}
Actually there are several ways to make an image caption, such as using <table>. I'm not saying that this is the best way to do that. But this is the easiest way since I see you're using <figure> there. I hope this helps you.