title: Disable text wrapping around floating images
body: <p>I have a page which looks like this:</p>
  
  <pre><code>&lt;div&gt;
  &lt;p&gt; This text appears above the image&lt;/p&gt;
  &lt;!-- I know the &lt;div&gt;&lt;p&gt; construction is superfluous. I was just trying things out --&gt;
  &lt;/div&gt;
  
  &lt;div style="display: block; width: 100%; clear: both;"&gt;
  
     &lt;img class="left" alt="Img1" src="img1.jpg" alt="" width="242" height="181" /&gt;
     &lt;img class="right" alt="Img2" src="img2.jpg" alt="" width="242" height="181" /&gt;
  
  &lt;/div&gt;
  
  &lt;div&gt;
  &lt;p&gt; This text appears between those images. I want it to display below them.&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Each image has this CSS:</p>
  
  <pre><code>.left {
     float: left;
     margin-right: 5px;
  }
  .right {
     float: right;
     margin-left: 5px;
  }
  </code></pre>
  
  <p>How can I make it so that those two images float next to each other, but text does not wrap in between those images? </p>
  
  <p>ASCII art of the current page:</p>
  
  <pre><code>my text my text my text my textmy text
  my text my text my textmy text my text
  
  --------- text is wrapping ---------
  |  IMG  | text is wrapping |  IMG  |
  --------- text is wrapping --------- 
  
  my text my text my text my textmy text
  my text my text my textmy text my text
  </code></pre>
  
  <p>Beautiful ASCII art of what I desire:</p>
  
  <pre><code>my text my text my text my textmy text
  my text my text my textmy text my text
  
  ---------                  ---------
  |  IMG  |                  |  IMG  |
  ---------                  --------- 
  
  text is wrapping text is wrapping text
  is wrapping
  
  my text my text my text my textmy text
  my text my text my textmy text my text
  </code></pre>