html - div重叠时应该向下推

我正在使用媒体查询建立我的第一个网站，到目前为止，它进展顺利，没有一个问题。当您减小结果页面的宽度时，红色div会移到导航后面，而不是与其他内容一起被下推。

供参考的JSFiddle：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;
}

知道我做错了什么吗？我已经尝试了position属性的几种组合，但是到目前为止还没有运气。

最佳答案

加

.slideshow {
    clear: both;
}