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

See this link for more options to solve your problem: http://www.quirksmode.org/css/clearing.html

Option 1. I believe you can set your container divs to overflow:hidden; which will clear them and bump the second container down so there is no overlap.

Option 2. You should set a div below your floats that clears them. There are several ways to do this, but the simplest is to set another div below your floats with the css clear:both

Side note: Be sure to also give your clearing div a height:0;line-height:0;display:block; to insure it doesn't add any funky space at the bottom of your containers

---

EDIT: Since this question was last asked (and answered) new ways of achieving the desired effect have changed. A common practice is to have a container div with the following styles:

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

This method is used by popular frameworks (e.g. - Zurb Foundation & Twitter Bootstrap)