title: Change DIV height to fit image
body: <p>I'm trying to make a DIV that's pretty much a box with a border that has a left-aligned image and text that's to the right of the image. Here's how I have it set up:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div style="padding:1%; border-style:solid; border-size:1px; width:100%;"&gt;
          &lt;img src="http://i.imgur.com/FwgZFNn.jpg" style="float:left; max-width:30%; max-height:200px;" /&gt;
          Here is some text.
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is that, if the image is taller than the text, the surrounding DIV (and therefore the border) sizes itself to become the height it needs to be to fit in all the text, but the image overflows out of the DIV.</p>
  
  <p>How can I make the DIV change its height to fit whichever is taller (the image or the text) so that both fit within the border?</p>
  
  <p>Thanks.</p>