title: Clearfix with twitter bootstrap
body: <p>I have an issue with twitter bootstrap that looks a little bit strange to me. I have a sidebar with fixed with at the left side and a main area.</p>
  
  <pre><code>&lt;div&gt;
    &lt;div id="sidebar"&gt;
      &lt;ul&gt;
        &lt;li&gt;A&lt;/li&gt;
        &lt;li&gt;A&lt;/li&gt;
        &lt;li&gt;C&lt;/li&gt;
        &lt;li&gt;D&lt;/li&gt;
        &lt;li&gt;E&lt;/li&gt;
        &lt;li&gt;F&lt;/li&gt;
        &lt;li&gt;...&lt;/li&gt;
        &lt;li&gt;Z&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div id="main"&gt;
      &lt;div class="clearfix"&gt;
        &lt;div class="pull-right"&gt;
          &lt;a&gt;RIGHT&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;div&gt;MOVED BELOW Z&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre class="lang-css prettyprint-override"><code>#sidebar {
    background: red;
    float: left;
    width: 100px;
  }
  
  #main {
    background: green;
    margin-left: 150px;
    overflow: hidden;
  }
  </code></pre>
  
  <p>Inside the main area I have some content with pull-left and pull-right with is cleared by a clearfix. </p>
  
  <p>The problem is that the content below the clearfix-div is moved to be lower than the sidebar-content.</p>
  
  <p>I made a fiddle for this: <a href="http://jsfiddle.net/ZguC7/">http://jsfiddle.net/ZguC7/</a></p>
  
  <p>I solved the problem by setting the "overflow: collapse" to #main, but I dont understand it and would be very happy if somebody can explain what is causing this issue.</p>