title: Floating IMG resize percentage
body: <p>I'm trying to resize an img proportionally with the container. The IMG floats left and there is a paragraph wrapping around it.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div&gt;
  &lt;img src="picture.png"&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum venenatis      libero, eu egestas elit laoreet nec. Donec in nunc dictum nunc luctus eleifend sagittis id augue.&lt;/p&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>div {
      width: 80%;
  }
  img {
      max-width: 100%;
      float: left;
      margin: 0 10px 10px 0;
  }
  </code></pre>
  
  <p>​The image gets resized only when the left div border hits the image and the paragraph is completely bellow the img. I want to resize the img as soon as the div resizes. I know I can put the img in a wrapper div and give it a percentage width, but I'd like a cleaner solution, if it's possible.</p>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/989uX/" rel="nofollow">http://jsfiddle.net/989uX/</a></p>