2格在div内浮动。其中2个div浮动在另一个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“主体”中的内容比右侧栏更长时，不会自动调整高度。取而代之的是，大量的溢出内容与我的页脚重叠。对于此类“嵌套”浮动元素，是否要遵循某些协议。还是我以错误的方式使用了clear:both;？

提前感谢

-----更新-------

[好，这是我的页面链接：http://www.currentconservation.org/new/?q=featured

它在drupal上，因此某些人可能会讨厌遍历所有html。但是该页面的结构基本上与我已经提到的结构相同，其他div嵌套在各个div中。

如您所见，页脚完全不正确。

Answer 1