title: How can I prevent DIVs from overlapping a right floated image?
body: <p>I have a document with two images and some text. The first image is floated left, the second one floated right.</p>
  
  <p>The problem is that text from DIVs overlaps the second image. The text "<em>First DIV after second image</em>" should be placed below the first image and to the left of the second image (since it's after the second <code>IMG</code> tag). What am I missing?</p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/yLUnC/4/" rel="nofollow noreferrer">http://jsfiddle.net/yLUnC/4/</a></p>
  
  <p><img src="https://i.stack.imgur.com/RtpIw.png" alt="example screenshot"></p>
  
  <p>Html:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div&gt;DIV before first image&lt;/div&gt;
      &lt;img class="floatLeft" src="http://placehold.it/200x100&amp;text=First+image"&gt;
      &lt;div&gt;DIV after first, before second&lt;/div&gt;
      &lt;img class="floatRight" src="http://placehold.it/200x100&amp;text=Second+image"&gt;
      &lt;div&gt;First DIV after second image&lt;/div&gt;
      &lt;div&gt;text&lt;/div&gt;
      &lt;div&gt;text&lt;/div&gt;
      &lt;div&gt;text&lt;/div&gt;
      &lt;div&gt;text overlapping second image, not good&lt;/div&gt;
      &lt;div&gt;last DIV&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>