重叠DIV（可变宽度问题）

Question

我有2个div列设置为val％，在那些列中我有一些较小的静态宽度/高度框..

..另一方面是可变宽度/高度列。

但是，当我改变浏览器窗口的宽度时，这些div重叠。

我尝试了溢出/浮动/分钟和最大高度等各种组合，但我没有到达任何地方。

有人可以指出我失踪了吗？

粗略的jsfiddle： http://jsfiddle.net/2xdcases/

实际页面： https://www.ablueman.co.uk/testbench/newindex/

.content {
margin: 2px 0px 2px 0px;
border-bottom: 1px solid #BABABA;
padding: 10px 10px 10px 10px;
background-color: #b0c4de;
}

.cont {
float:left;
width:48%;
margin: 1px 0px 1px 0px;
border-bottom: 1px solid #BABABA;
padding: 5px 5px 5px 5px;
/*background-color: #b0c4de;*/
/* min-height: 600px; */
}

.co {
float:left;
width: 200px;
Height: 300px;
margin: 1px 0px 1px 0px;
border: 1px solid #BABABA;
padding: 2px 2px 2px 2px;
overflow:auto;
}

Answer 1

给#contentWrapper overflow: hidden;

因为左边的元素是浮动的，所以父元素不会相应地改变它的大小

欲了解更多信息，请阅读以下内容：http://css-tricks.com/all-about-floats/（特别是标题为＆＃39;大崩溃＆＃39;）