CSS float clearing help

Question

I'm developing a new website and it seems I'm missing something that should be obvious. I have a centered wrapper div, with a left and right column inside it. The right column is made up of three "main" divs (#mainTop #main #mainBottom), all floated right. The left column is a smaller, sidebar div (#sidebar) floated left.

If you look at the test site: http://puresas.ebridgesites.com/ you'll see that the left sidebar is clearing the right floated divs, and I can't figure out why.

Answer 1

Try puting the sidebar between the <div id="mainTop"></div> and <div id="main"></div>. So it'll look like below

<div id="wrap">
  <div id="mainTop"></div>
  <div id="sidebar"></div>
  <div id="main"></div>
  <div id="mainBottom"></div>
</div>

Answer 2

You can fix it by moving #sideBar to before #mainTop in your HTML.

Live Demo
(Your assets are being loaded thanks to <base href="http://puresas.ebridgesites.com/" />)