title: trouble positioning div below several float left divs
body: <p>It's a bit tricky to describe css issues, but I'll do my best.</p>
  
  <p>Below my nav bar, I have a container div.  It is set to 80% wide.</p>
  
  <p>In the container div, I have a box-wrapper div that contains four divs that are all <code>float:left;</code>  They Are that way so that They can drop down one at a time depending on the users browser size.</p>
  
  <p>Below the box wrapper is another box-wrapper2 div that contains four divs that are not floated.  </p>
  
  <p>They appear one above the other.</p>
  
  <p>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.  </p>
  
  <p>How do I do this?</p>
  
  <p>Here is the page I'm talking about:
  <a href="http://www.rattletree.com/index2.php">http://www.rattletree.com/index2.php</a></p>
  
  <p>If you use firebug and hover over the first "programDetail" div, you can see that it is going up and under the above div.</p>
  
  <p>Thanks for any help! </p>