title: How to make a floated image act responsively?
body: <p>Please see <a href="http://jsfiddle.net/ajnoguerra/wVxZS/1/" rel="nofollow">this fiddle</a></p>
  
  <p>My main concern in this fiddle is the div#text and img.frame. I'm trying to create a responsive website, but this has been my problem for so long, I can't figure out how 'to make the img behave beside the text and be responsive at the same time when I try to reduce the size of the browser window. What it does is, it goes under the text before it acts responsively. Is there a workaround for this?</p>
  
  <pre><code>&lt;div id="text"&gt;This is some text this is some text this is some text&lt;/div&gt;
  &lt;img src="http://upload.wikimedia.org/wikipedia/en/thumb/5/5f/TomandJerryTitleCardc.jpg/250px-TomandJerryTitleCardc.jpg" width="294" height="225" class="frame" /&gt;
  </code></pre>