title: css - shrink a parent div to fit one child's width and constrain the width of the other child
body: <p>Say, a parent div has two child divs, one containing text, the other containing an image of known (but variable) width &amp; height.</p>
  
  <p>I would like</p>
  
  <ul>
  <li>the width of the first child (image-containing) div to shrink to fit the width of the image (this i can do)</li>
  <li>the parent div (of unspecified width) to shrink to fit the width of the image-containing div (this is ok too)</li>
  <li>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).</li>
  </ul>
  
  <p>I have a working version that does what I want <em>until</em> the quantity of text in the second child pushes the parent div's width wider than that of the image.</p>
  
  <p>Here's my code:</p>
  
  <p>css:</p>
  
  <pre><code>#container{border:1px solid #f00;display:inline-block;}
  #child1{border:1px solid #0f0;}
  #child2{border:1px solid #00f;}
  img {border:1px solid #000;}
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="container"&gt;
  &lt;div id="child1"&gt;&lt;img src="//www.google.com/logos/2012/Teachers_Day_Alt-2012-hp.jpg" width="300" height="116"&gt;&lt;/div&gt;
  &lt;div id="child2"&gt;Lorem ipsum dolor sit amet.&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and here's a jsfiddle:
  <a href="http://jsfiddle.net/BmbAS/1/" rel="noreferrer">http://jsfiddle.net/BmbAS/1/</a></p>
  
  <p>you can see where it's going wrong by clicking the 'lengthen/shorten text' link to increase the quantity of text</p>
  
  <p><strong>tldr - i want all the divs to be the same width which is equal to the width of the image</strong></p>
  
  <p>ps. modern browser solution only necessary</p>