title: How to work around this Safari float rendering bug
body: <p>I need to display text around a floated element that itself has been pushed downwards. The HTML/CSS is very simple:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="shim"&gt;&lt;/div&gt;
      &lt;div id="myimg"&gt;&lt;/div&gt; 
      &lt;p&gt;This is a test to demonstrate the float overwriting issue. The blue box represent an image that I don't wish the text to overwrite...&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#container {
      width: 200px;
  }
  
  #shim {
      float:right;
      width: 1px;
      height: 40px;
      background-color: red;
  }
  
  #myimg {
      clear:both;
      float:right;
      width: 100px;
      height: 40px;
      background-color: blue;
  }
  </code></pre>
  
  <p>It works perfectly in Chrome and Firefox, however in Safari the text overwrites my floated element. </p>
  
  <p>I've created a fiddle to demonstrate the bug (obviously, you'll need safari to see it):</p>
  
  <p><a href="http://jsfiddle.net/8JLFp/" rel="nofollow">http://jsfiddle.net/8JLFp/</a></p>
  
  <p>Can anyone find a solution or suggest another way of doing this?</p>