如何使 div 不与父 div 内的另一个 div 重叠

Question

所以基本上我有 mainDiv，它几乎是身体的大小。在 mainDiv 中，有 2 个 div，它们应该彼此相邻，直到调整大小或移动设备进来。问题是第二个 div 与第一个完全重叠。

期望的结果 http://img17.imageshack.us/img17/473/yn9x.jpg

#mainDiv { 
    border: 1px solid black;
    height: 670px;
}

#mainDiv div {
    position:relative;
    border: 1px solid red;
    float: left;
}

其余代码：http : //jsfiddle.net/fDELs/2/

• 我不能使用 width: [value]% 因为我不需要在放大时总是显示两个 div（而且它仍然开始水平吃第一个 div）。
• 我不能使用 float: left 或 float:right，因为如果页面变宽，则空白区域会出现在 2 个 div 之间。

现在我有 js 解决方案，它检查第一个 div 的宽度和位置并设置第二个 div 的“左”属性，但我很想在 CSS 中做到这一点。

Answer 1

从 div 中删除position: relative和top值，并margin-top改为使用。

#mainDiv {
    border: 1px solid black;
    height: 670px;
}

#mainDiv div {
    border: 1px solid red;
    float: left;
}

#first {
    margin-top: 170px;
}

#second {
    height: 400px;
    margin-top: 65px;
}

更新的小提琴