title: How do I get a CSS float to overlap a table?
body: <p>How do I get a floated element to overlap a table?  It overlaps other divs just fine, but the table seems to force a <code>clear</code>.  </p>
  
  <p>In my example, the div is overlapped (what I want) but the table below that clears past the floated element (which I don't.)</p>
  
  <p>Example here: <a href="http://cssdesk.com/9rZVs" rel="nofollow">http://cssdesk.com/9rZVs</a>.  (IE seems to fry this so I'll paste it here too.)</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div&gt;
    &lt;span style="float:right;width:40%;"&gt;
      content content content content content
      content content content content content
      content content content content content
    &lt;/span&gt;
    content content content content...
  &lt;/div&gt;
  
  &lt;div&gt;
  content content content content content 
  content content content...
  &lt;/div&gt;
  
  &lt;table &gt;&lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  </code></pre>
  
  <p>CSS:    </p>
  
  <pre><code>table {
   width:300px;
   border: 1px solid black;
  }
  span {
   border:2px solid black;
   background-color: #ddd;
   margin: 2px solid gray;
  }
  div {
   border:2px solid black;
   background-color: #fff;
   margin: 2px solid gray;
   width: 200px;
   padding: 10px;
  }
  </code></pre>