我正在尝试使用一些浮动 div 和东西创建一个响应式设计。在我的标题和图像滑块下方，我的主要内容有一个 div。在这里，我有 2 个 div，一个向左浮动，一个向右浮动。在右侧的 div 中，我在单个列中有 3 个 div。在左侧 div 中，我有 4 个 div 全部向左浮动，它们的位置如下：
这是我的问题 - 当我调整浏览器宽度时，左侧容器 div 中的两个底部 div 像这样移动：
我尝试过使用 clearfix，但这似乎并没有解决问题，现在我被卡住了。
谁能告诉我我在这里做错了什么 - 请！;o)
上面的截图来自 Chrome 浏览器。任何其他浏览器（Safari、firefox、Opera）都会显示相同的错误，但始终如此。不仅当我将大小调整为比页面内容更小的时候。
我希望有人可以在这里帮助我。有点沮丧;o（下面，你会找到我的代码。谢谢！
//杰斯珀
HTML：内容
<div id="content-wrap" class="centered">
<div id="fp-branding-area">
<!-- nivo slider here -->
</div>
<div id="content-main">
<div class="fp-box-main">
<img src="images/fp_box1.jpg" alt="Alttext1">
<h1 class="box-caption">Caption1</h1>
</div>
<div class="fp-box-main"><img src="images/fp_box2.jpg" alt="Alttext2">
<h1 class="box-caption">Caption2</h1>
</div>
<div class="fp-box-main"><img src="images/fp_box3.jpg" alt="Alttext3">
<h1 class="box-caption">Caption3</h1>
</div>
<div class="fp-box-main"><img src="images/fp_box4.jpg" alt="Alttext4">
<h1 class="box-caption">Caption4</h1>
</div>
</div> <!-- /end #content-main -->
<div id="content-side">
<div class="fp-box-side">
<img src="images/fp_box_side1.jpg" alt="Side Alttext1">
<h1 class="box-caption">SideCaption1</h1>
</div>
<div class="fp-box-side">
<img src="images/fp_box_side2.jpg" alt="Side Alttext2">
<h1 class="box-caption">SideCaption2</h1>
</div>
<div class="fp-box-side">
<img src="images/fp_box_side3.jpg" alt="Side Alttext3">
<h1 class="box-caption">SideCaption3</h1>
</div>
</div> <!-- /end #content-side -->
</div> <!-- /end #content-wrap -->
</div> <!-- /end #page -->
<footer id="footer-main">
<div id="footer-wrap" class="centered">
Content
</div>
</footer>
</body>
CSS：
h1, h2, h3, h4, hgroup {
font-family: Avenir;
font-size: 1.18em;
letter-spacing: .05em;
}
.centered {
position: relative;
margin: 0 auto;
}
.full-width {
width: 960px;
}
#page {
background: url(../images/gradient_page.png) repeat-x;
min-height: 100%;
width: 100%;
}
#header-main {
height: 137px;
background: url(../images/bg_header.jpg);
}
#header-wrap {
width: 960px;
}
#content-wrap {
background: url(../images/web-dropshadow_header.png) center top no-repeat;
width: 100%;
max-width: 960px;
overflow: auto;
padding-bottom: 136px;
/* must be same height as the footer */
}
#fp-branding-area {
width: 100%;
margin-top: 2.11361%;
background-color: #c6c6c6;
}
#content-main {
width: 78.85416666666667%;
/* ((757 / 960) * 100) */
float: left;
margin-bottom: 2.11361%;
}
#content-side {
width: 21.14583333333333%;
/* ((203 / 960) * 100) */
float: left;
}
.fp-box-main {
position: relative;
width: 47.88639%;
/* ((362.5 / 757) * 100) */
margin: 2.11361% 2.11361% 0 0;
float: left;
overflow: hidden;
clear: none;
}
.fp-box-main img, .fp-box-side img {
width: 100%;
margin-bottom: -3px;
}
.fp-box-side {
position: relative;
margin-top: 7.88177%;
width: 100%;
overflow: hidden;
clear: both;
}
.fp-box-side h1 {
font-size: .8em;
}
.box-caption {
background-color: black;
color: #FFF;
position: absolute;
text-align: center;
text-transform: uppercase;
width: 90%;
padding: 5%;
bottom: 0;
}
#footer-main {
position: relative;
margin-top: -136px;
/* negative value of footer height */
height: 136px;
clear: both;
background-color: white;
}
#footer-wrap {
width: 960px;
}