Make text in div below image take on width of image

Question

So I am trying to get the text beneath an image to not go wider than the image itself. I can't quite figure it out.

It would be easy if the parent div had a fixed width, but the width of the parent and the image within are variable based on the image width.

I have it as a sibling currently, but maybe making it a child on the image div is the solution.

Here is a jsfiddle: http://jsfiddle.net/z6f15coy/1/

     <div class='parent'>
        <div class="child_1">
            <img src="http://cdn.pet360.com/pet360/Content/Images/CMS/Slideshows/cms_resized_large/cats-that-stay-small1.lg.jpg" >
        </div>
        <div class="child_2">
            Some text that is wider than the image goes here... Lorem ipsum whatever. 
        </div>
    </div>

Sincere thanks for any help. It is greatly appreciated.

this is not possible unless you use javascript to detect the img width... block element by default expend as wide as it need if no width is applied..and child element will expend the container if parent width is not declared.. — Andrew, Jul 28 '15 at 19:40
+ Leaving Images without width and height on a page is not good idea as this can disturb the layout of the page. If you still need to do it JavaScript is the only option as our page can only know the dimensions of the img once it is loaded and then dynamically it can sewt the width of child2 div as per that — Sukrit Gupta, Jul 28 '15 at 19:49
by a second thought, if your paragraph have a fixed height, then this could be achieved, sth like this http://jsfiddle.net/z6f15coy/3/ . position absolute on your child2 will always be the width of your container, and since your container is the width of your img, your paragraph will also applied the width on the image width. However, since its position absolute, it means it has taken out of the flow, thus making the container not counting the child2 as a child element. you will need to set a padding-bottom on your container to expend as tall as your paragraph — Andrew, Jul 28 '15 at 19:50
possible duplicate of [How to make image caption width to match image width?](http://stackoverflow.com/questions/30686191/how-to-make-image-caption-width-to-match-image-width) — Stickers, Jul 28 '15 at 20:34

score 4 · Accepted Answer · answered Jul 28 '15 at 19:51

You could relay on table display behavior :

.parent {
    border: 1px solid #c4c4c4;
    padding:5px;
    margin:5px;
    display:table;
    width:1px;/* will extand to fit longest content (image or a very long word) */
}

<div class='parent' style="">
    <div class="child_1">
        <img src="http://cdn.pet360.com/pet360/Content/Images/CMS/Slideshows/cms_resized_large/cats-that-stay-small1.lg.jpg">
    </div>
    <div class="child_2">Some text that is wider than the image goes here... Lorem ipsum whatever.</div>
</div>

score 0 · Answer 2 · answered Jul 28 '15 at 19:33

0

Define a width for that div?

try this if i got you.

http://jsfiddle.net/z6f15coy/2/

answered Jul 28 '15 at 19:33

Yeah, thanks. I wanted it to match the width of the image no matter what size the image was, but I guess this can only be done via javascript. – ambe5960 Jul 28 '15 at 19:47

Make text in div below image take on width of image

2 Answers2