title: how to position div with css and force text to wrap around
body: <p>I read previous posts and changed my CSS from an absolute position in order to get the text to wrap around.</p>
  
  <p>I want this div to be position in the bottom right corner and for the text to move around it.</p>
  
  <p>However, at the moment the text is forcing the div down.</p>
  
  <p>Anyone have any idea on how to solve this?</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="top-image"&gt;
          image
      &lt;/div&gt;
  
      &lt;p&gt;dummy text dummy text dummy text dummy text dummy text dummy text 
  dummy text dummy text dummy text dummy text dummy text dummy text dummy text 
  dummy text dummy text dummy text dummy text dummy text dummy text dummy text 
  dummy text dummy text dummy text dummy text dummy text dummy text dummy text 
  dummy text      &lt;br&gt;&lt;br&gt;
  
  dummy text dummy text dummy text dummy text dummy text dummy text dummy 
  text dummy text dummy text dummy text dummy text dummy text dummy text dummy 
  text dummy text dummy text dummy text dummy text dummy text dummy text dummy 
  text dummy text dummy text dummy text dummy text dummy text dummy text dummy
  text&lt;p&gt;
  
  
  &lt;div id="bottom-image"&gt;
      image
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#bottom{
  float:left;
  height:215px;
  width:100%;
  margin-top:10px;
  margin-bottom:10px;
  }
  
  #top-image{
      background-color:#999;
      float:left;
      width:140px;
      height:110px;
      margin-right:10px;
      margin-bottom:10px;
      }
  
  #bottom-image{
      background-color:#999;
      float:right;
      width:140px;
      height:110px;
      margin-left:10px;
      }
  </code></pre>
  
  <p>This is what it looks like at the moment:
  <img src="https://i.stack.imgur.com/YWuut.jpg" alt="screenshot"></p>
  
  <p>As you can see the text is pushing the bottom image down into the footer.</p>