title: float text right and not image
body: <p>I'm trying to the push the images back to the left under the title. Only floating the description text to the right. I can't seem to clear the image floats. </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="title"&gt;System Displays&lt;/div&gt;
  &lt;div class="description"&gt;Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. 
   &lt;img src="http://dummyimage.com/400x200/000/fff" /&gt; 
   Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.title {    
  width: 200px;
  float: left;
  } 
  
  .description{    
  width: 200px;
  float: right;
  } 
  
  .description img {
  float: left;
  clear: both; 
  }
  </code></pre>
  
  <p>The <a href="http://jsfiddle.net/McXHq/" rel="nofollow">jsfiddle</a> is clearer. I can't insert any extra HTML. Thanks for any advice.</p>
  
  <p>EDIT: And this [<a href="http://jsfiddle.net/McXHq/2/" rel="nofollow">jsfiddle</a>] is what I visually want to achieve. I'm not sure if <code>position: relative;</code> is appropriate though. </p>