trouble positioning div below several float left divs

Question

It's a bit tricky to describe css issues, but I'll do my best.

Below my nav bar, I have a container div. It is set to 80% wide.

In the container div, I have a box-wrapper div that contains four divs that are all float:left; They Are that way so that They can drop down one at a time depending on the users browser size.

Below the box wrapper is another box-wrapper2 div that contains four divs that are not floated.

They appear one above the other.

The problem is that for some reason the box-wrapper2 div is shifting up and behind the box wrapper. I want it positioned below the top wrapper.

How do I do this?

Here is the page I'm talking about: http://www.rattletree.com/index2.php

If you use firebug and hover over the first "programDetail" div, you can see that it is going up and under the above div.

Thanks for any help!

Answer 1

有关解决问题的更多选项,请参阅此链接:http://www.quirksmode.org/css/clearing.html

选项1.我相信您可以将容器div设置为overflow:hidden;清除它们并将第二个容器向下撞击,这样就没有重叠.

选项2.你应该在你的花车下方设置一个div来清除它们.有几种方法可以做到这一点,但最简单的方法是使用css在浮点数下方设置另一个divclear:both

附注:请务必给出清理分区,height:0;line-height:0;display:block;以确保它不会在容器底部添加任何有趣的空间

编辑: 由于上一次提出(并回答)这个问题,实现预期效果的新方法已经改变.通常的做法是使用以下样式的容器div:

.container:before, 
.container:after {
 display: table;
 line-height: 0;
 content: "";
}
.container:after {
 clear: both;
}

流行框架使用此方法(例如 - Zurb Foundation和Twitter Bootstrap)