2个DIV与float：right重叠

Question

我正在使用HTML和CSS，我发现重新排列重叠元素很困难。

Live example on the jsFiddle

CSS：

#posts {
    background: blue;
    float: right; 
    width: 75%; 
    padding: 5px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
}

#login-container {
    overflow: clear;
    background: white;
    width: 280px;
    height: 330px;
}

HTML：

<div id="content" class="container">
  <div id="posts">
    <div id="login-container">
        <div id="login">
            <h1>Member login</h1>
        </div>
    </div>
  </div>
</div>

当我调整浏览器窗口大小时，这两个总是相互重叠。 我希望我可以在这里发布图像，但需要10次重复。

Answer 1

请问，你在哪里关闭#posts div？这可能是因为#login-container位于#posts内。

Answer 2

看这里： http://jsfiddle.net/nxyg0xwd/4/

#posts {
  float: left; 
  width: 100%;
  margin-left: 288px; 
}

您必须将内容浮动，并创建一个与登录视频大小相同的边距。