Div's overlapping when they should be pushed downwards

Question

I'm building my first website using media queries and so far it is going quite well minus one issue. As you decrease the width of the results page the red div moves behind the navigation instead of being pushed down along with the rest of the content.

JSFiddle for reference: http://jsfiddle.net/SimplyAzuma/nPceX/18/

HTML:

<div class="container">
  <div class="box">News</div>
  <div class="box">Events</div>
  <div class="box">Menu</div>
  <div class="box">Gallery</div>
  </br>
  <div class="slideshow"></div>
    <div class="contentarea">
      <div class="content">
        CONTENT TEXT HERE
      </div>
  </div>
</div>

CSS:

@media (min-width: 851px) {
.container {
    width:816px;
    margin:0 auto;
}
}

@media (max-width: 850px) {
.container {
    width:408px;
    margin:0 auto;
}
}
@media (max-width: 430px) {
.container {
    width:204px;
    margin:0 auto;
}
}

.box {
text-align:center;
line-height:23px;
margin:1px;
float:left;
clear:none;
width:200px;
height:25px;
border:1px solid #525252;
background:#363636;
}

div.box:hover {
color:#292929;
background:#CDCDCD;
font-weight:bold;
}

.contentarea {
font-size:14px;
margin:2px 1px 0px 1px;
height:100%;
border:1px solid #525252;
background:#363636;
color:#CDCDCD;
}

.content {
margin:0 5px 5px 5px;
}

.slideshow {
margin:8px 1px 0px 1px;
height:200px;
border:1px solid #525252;
background:#ff4444;
}

Any idea what I may be doing wrong? I've tried several combinations of position attributes but have had no luck so far.

Answer 1

Add

.slideshow {
    clear: both;
}