title: Remove staircase in this example
body: <p>Is it possible to remove the staircase effect in this example ? I have one div floating right and a few divs with fixed height and fixed width floating left. If the divs meet somewhere I get a rather strange staircase effect. </p>
  
  <p>I know why this happens and I get it but im looking for a solution to avoid this. Please help me </p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="fright"&gt;just some contents floating right&lt;/div&gt;
    &lt;div class="fleft"&gt;a div&lt;/div&gt;
    &lt;div class="fleft"&gt;
          this one is the problem. 
          Is it possible to have this div start at position B
    &lt;/div&gt;
    &lt;div class="fleft"&gt;&lt;b&gt;Position B&lt;/b&gt;&lt;/div&gt;
    &lt;div class="fleft"&gt;a div&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>​
  and the css</p>
  
  <pre><code>div{
      margin:10px;
      padding:10px;
  
  
  .container{
      width:460px;
      float:left;
  }
  
  .fright{
      float:right;
      border:1px solid green;
  }
  
  .fleft{
      float:left;
      height:180px;
      width:180px;
      border:1px solid orange;
  }​
  </code></pre>
  
  <p><a href="http://jsfiddle.net/FusWd/1/" rel="nofollow">http://jsfiddle.net/FusWd/1/</a></p>