Take the 2-minute tour ×

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.

share|improve this question
Does anyone have a suggestion that doesn't require me to move the sidebar content above the Main content? From the css, it seems it should work fine, but it obviously doesn't. I'm looking for why it doesn't. –  Ben Feb 25 '11 at 16:22
add comment

2 Answers

up vote 2 down vote accepted

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/" />)

share|improve this answer
I really wanted to know why it didn't work the way I had it, but thinking about it more, I think it would make more sense to put the left column above the right, because that's where my main <header> element is, along with the logo and main nav. Thanks. –  Ben Feb 25 '11 at 16:29
add comment

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>
share|improve this answer
add comment

Your Answer


