Float element mystery

Question

I have the following markup:

<div id="container">
  <div id="sidebar">
    <h2>Sidebar</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
  </div>
  <div id="main">
    <h2>Main</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
  </div>
</div>

And following styles:

#sidebar {
   background: #e3e3e3;
   float: left;
}
#main {
   background: #666;
}

I was expecting div with id sidebar to go on top and hide div with id main. My logic is - div with id sidebar is floated and is removed from normal flow thus div with id main should take its position. But all browsers display div with id main right below div with id sidebar as if there was no float.

Answer 1

You need to clear float after #sidebar.

HTML:

<div id="sidebar">
    ....
</div>
<div class="clr"></div>
<div id="main">
    ....
</div>

CSS:

.clr{clear:both;}

DEMO here.