Clearfix with twitter bootstrap

Question

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.

<div>
  <div id="sidebar">
    <ul>
      <li>A</li>
      <li>A</li>
      <li>C</li>
      <li>D</li>
      <li>E</li>
      <li>F</li>
      <li>...</li>
      <li>Z</li>
    </ul>
  </div>
  <div id="main">
    <div class="clearfix">
      <div class="pull-right">
        <a>RIGHT</a>
      </div>
    </div>
  <div>MOVED BELOW Z</div>
</div>

#sidebar {
  background: red;
  float: left;
  width: 100px;
}

#main {
  background: green;
  margin-left: 150px;
  overflow: hidden;
}

Inside the main area I have some content with pull-left and pull-right with is cleared by a clearfix.

The problem is that the content below the clearfix-div is moved to be lower than the sidebar-content.

I made a fiddle for this: http://jsfiddle.net/ZguC7/

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.

Blondell

I updated your fiddle, jsfiddle.net/ZguC7/123. I just changed the position of closing tag of 'clearfix' div and it corrected the height – Fries

Thanks, but this is not what I wanted. The "Hello" text should not be in same line with "FOO" – Blondell

Answer 1

clearfix should contain the floating elements but in your html you have added clearfix only after floating right that is your pull-right so you should do like this:

<div class="clearfix">
  <div id="sidebar">
    <ul>
      <li>A</li>
      <li>A</li>
      <li>C</li>
      <li>D</li>
      <li>E</li>
      <li>F</li>
      <li>...</li>
      <li>Z</li>
    </ul>
  </div>
  <div id="main">
    <div>
      <div class="pull-right">
        <a>RIGHT</a>
      </div>
    </div>
  <div>MOVED BELOW Z</div>
</div>

see this demo

---

Happy to know you solved the problem by setting overflow properties. However this is also good idea to clear the float. Where you have floated your elements you could add overflow: hidden; as you have done in your main.

Mana

I also just add a <div class='clearfix'></div> where my 'line break' should be, and it works nicely. – Diarrhea