Скажем, у родительского элемента div есть два дочерних элемента div, один из которых содержит текст, а другой - изображение известной (но переменной) ширины & amp; рост.

мне бы хотелось

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).

У меня есть рабочая версия, которая делает то, что я хочуuntil количество текста во втором дочернем элементе увеличивает ширину родительского элемента div по сравнению с шириной изображения.

Вот мой код:

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>

и здесь это jsfiddle: http://jsfiddle.net/BmbAS/1/

Вы можете увидеть, где происходит ошибка, нажав на кнопку «удлинить / сократить текст»; ссылка для увеличения количества текста

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

пс. необходимо только современное браузерное решение