Справка по очистке с плавающей точкой CSS

Question

Я разрабатываю новый веб-сайт, и мне кажется, что я упускаю что-то, что должно быть очевидным. У меня есть центрированная оболочка div с левым и правым столбцом внутри. Правый столбец состоит из трех «основных» элементов div (#mainTop #main #mainBottom), все всплывающие справа. Левый столбец - это меньший, div боковой панели (#sidebar) плавает влево.

Если вы посмотрите на тестовую площадку: http://puresas.ebridgesites.com/, вы увидите, что левая боковая панель очищает правые плавающие элементы div, и я не могу понять, почему.

Answer 1

Вы можете исправить это, переместив #sideBar до #mainTop в своем HTML.

Live Demo
(Ваши активы загружаются благодаря <base href="http://puresas.ebridgesites.com/" />)

Answer 2

Попробуйте поместить боковую панель между <div id="mainTop"></div> и <div id="main"></div>.Так будет выглядеть ниже

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