2 divs плавающие слева внутри div. 2 таких дивы плавающим осталось внутри другого DIV - высота вопрос

Question

Так что у меня такой структуры:

<!-- Mind Wrap --> 
<div class="mid-wrap"> 

<!-- Content Wrap --> 
<div class="content-wrap"> 
    <div class="left-sidebar"></div> 
    <div class="main-article"> </div> 
    <div class="clear"></div> 
</div> 

<!-- Right siebar --> 
<div class="right-sidebar"></div> 
<div class="clear"></div> 

</div> 

Мой Css выглядит следующим образом:

.mid-wrap { 
    width:700px; 
    height:auto; 
    } 

    .content-wrap { 
    width:500px; 
    float:left; 
    position:relative; 
    height:auto; 
    } 

    .right-sidebar { 
    width:150px; 
    float:left; 
    position:relative; 
    height:auto; 
    } 

    .left-sidebar { 
    width:150px; 
    float:left; 
    position:relative; 
    height:auto; 
    } 

    .main-article { 
    width:300px; 
    float:left; 
    position:relative; 
    height:auto; 
    } 
.clear { 
clear:both; 
} 

Теперь, когда содержание внутри div «main-article» идет дольше, чем правая боковая панель, высота не настраивается автоматически. Вместо этого происходит массивное переполнение, которое перекрывает мой нижний колонтитул. Существует ли какой-то протокол для таких «вложенных» плавающих элементов. Или я использовал clear:both; неправильный путь?

Заранее спасибо

----- UPDATE -------

Хорошо, вот моя страница ссылка: http://www.currentconservation.org/new/?q=featured

Это на Друпала, так что некоторые люди могли бы найти это раздражает, чтобы пройти через весь html. Но страница в основном имеет такую ​​же структуру, как я уже упоминал, с другими вложенными div внутри соответствующих div.

Как вы можете видеть, нижний колонтитул полностью неуместен.

Answer 1

Неплохо использовать <div class="clear"></div> на ваших HTML-страницах. Вот пример того, как заставить элемент автомодельному ясно:

.clearfix:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
    } 
.clearfix { display: inline-block; } 
* html .clearfix { height: 1%; } 
.clearfix { display: block; } 

Примечание: Нанести class="clearfix" к родительскому элементу.

Answer 2

Попробуйте

<!-- Mind Wrap --> 
    <div class="mid-wrap"> 

    <!-- Content Wrap --> 
    <div class="content-wrap"> 
     <div class="left-sidebar"></div> 
     <div class="main-article"> </div> 
     <!-- Right sidebar --> 
    <div class="right-sidebar"></div> 
    </div> 
    </div> 
<div class="clear"></div> 

место ясного DIV чуть выше сноски