title: Make overflow hidden when shrinking div
body: <p>I have a div with an image in it, and the image is too large for the div. I have solved the overflow problem with the obvious CSS overflow:hidden trick.</p>
  
  <p>But, the problem is that when the div's parent resizes (shrinks), the div holding the image won't shrink because of the image in it.</p>
  
  <p>Is there a way to have a resizable div with an image in it (almost like a background image) that overflows?</p>
  
  <p>MY DIV STRUCTURE:</p>
  
  <pre><code>&lt;div id="parent"&gt;
      &lt;div id="image_holder"&gt;
          &lt;!-- this image will inevitably be larger than its parent div --&gt;
          &lt;img src="too_big_for_div.jpg" /&gt; 
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>MY CSS:</p>
  
  <pre><code>#parent { width:100%;}
  #image_holder { width:100%; overflow:hidden;}
  </code></pre>
  
  <p>The #image_holder div will not resize to a smaller dimension now. Any ideas?</p>