Question

Say, a parent div has two child divs, one containing text, the other containing an image of known (but variable) width & height.

I would like

• the width of the first child (image-containing) div to shrink to fit the width of the image (this i can do)
• the parent div (of unspecified width) to shrink to fit the width of the image-containing div (this is ok too)
• the text-containing second child div (also of unspecified width) to match the parent div’s width irrespective of the quantity of text it contains (this is where it gets tricky).

I have a working version that does what I want until the quantity of text in the second child pushes the parent div’s width wider than that of the image.

Here’s my code:

css:

#container{border:1px solid #f00;display:inline-block;}
#child1{border:1px solid #0f0;}
#child2{border:1px solid #00f;}
img {border:1px solid #000;}

html:

<div id="container">
<div id="child1"><img src="//www.google.com/logos/2012/Teachers_Day_Alt-2012-hp.jpg" width="300" height="116"></div>
<div id="child2">Lorem ipsum dolor sit amet.</div>
</div>

and here’s a jsfiddle:
http://jsfiddle.net/BmbAS/1/

you can see where it’s going wrong by clicking the ‘lengthen/shorten text’ link to increase the quantity of text

tldr – i want all the divs to be the same width which is equal to the width of the image

ps. modern browser solution only necessary

Answer 1

See this edited version of your jsFiddle.

Here’s what’s added to the CSS:

#container {
    display: table-cell;
}
#child1 {
    display: table-row;
    width: 1px;
}
#child2 {
    display: table-cell;
    width: 1px;
}