html - 如何使div不与父div中的另一个div重叠

Question

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

Desired outcome 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 的“left”属性，但我很乐意在 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;
}

Updated fiddle