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 <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?

You're going to need to define a width for the `figure` that's the width of the image. — davidpauljunior, Jan 28 '14 at 04:40
@davidpauljunior What if I don't know the width of the image? Are you saying I'd have to use javascript to read the image size and then alter the css based on that? — a.real.human.being, Jan 28 '14 at 04:44
@Beginner Unfortunately, no. As I mentioned, the text is to be shown directly below the image. — a.real.human.being, Jan 28 '14 at 04:45
What is your purpose of doing that? Do you want to make a caption? — asubanovsky, Jan 28 '14 at 04:45
Best practice for this you have to use table to place image and captio. — Pandiyan Cool, Jan 28 '14 at 04:54
@PandiyanCool you mean `display: table`, using a is not best practice as this isn't tabular data. — davidpauljunior, Jan 28 '14 at 04:54
@asubanovsky If you swap `p` to `figcaption`, the layout doesn't change. — a.real.human.being, Jan 28 '14 at 04:55
Found an interesting question/answer on here that might be related: http://stackoverflow.com/questions/283961/centering-a-div-block-without-the-width?rq=1 — a.real.human.being, Jan 28 '14 at 05:49
Here is one solution I found: http://jsfiddle.net/a9rEh/9/ You may also want to look at the caption property. — Lysol, Jan 28 '14 at 05:53

score 3 · Accepted Answer · answered Jan 28 '14 at 04:51

3

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

answered Jan 28 '14 at 04:51

davidpauljunior

8,238
6
30
54

Unfortunately, the image is no longer centered within its parent element. – a.real.human.being Jan 28 '14 at 04:56
Hmm, that's an interesting solution. Would you say that a solution of that type would be following "best practices"? – a.real.human.being Jan 28 '14 at 05:22
@a.real.human.being Well it's the only way I know that uses CSS only, and semantically it's correct. – davidpauljunior Jan 28 '14 at 05:26

score 0 · Answer 2 · answered Jan 28 '14 at 04:52

0

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.

answered Jan 28 '14 at 04:52

Siva Tumma

1,695
12
23

I think the OP means that they want the `
` to inherit the width from the image, not that it already is.
– davidpauljunior Jan 28 '14 at 04:52
Oh k, In which case he has to know the width of the image in advance. Dynamically setting values in css ?? inheriting rules from siblings ? I dont think it is possible. – Siva Tumma Jan 28 '14 at 04:57

score -1 · Answer 3 · answered Jan 28 '14 at 04:58

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.

I have reduced the image size and updated the fiddle. Please see that it is breaking this use case — Siva Tumma, Jan 28 '14 at 05:00

element inheriting width from a centered above it

3 Answers3