浮动右侧div:右侧左侧下方显示一条线

Question

这是我的问题.

我有一个包装div(宽度:800px和高度:250px),它包含两个占用高度所有空间并将宽度分成两半的div.

我设置了我的css,将右边的div浮动到浮动:右边,这一个出现在它应该的位置,但是在另一个的"下方",超过了包装div空间(甚至不应该是可能的).

我发布了jdfiddle和代码.

JS小提琴 http://jsfiddle.net/FV9yC/

HTML

<div id="wrapper">
    <!-- left div -->
    <div id="leftDiv">
        <h1>This is my heading</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <!-- right div -->
    <div id="rightDiv">
        <h1>This is my heading</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
</div>

CSS

#wrapper {
    background-color: grey;
    height: 200px;
    width: 500px; }

#leftDiv {
    background-color: purple;
    height: 200px;
    width: 250px; }

#rightDiv {
    background-color: green;
    float: right;
    height: 250px;
    width: 250px; }

Answer 1

只需将带有ID rightDiv的div 移到带有ID 的div上方leftDiv.而已.

这是工作解决方案

代码:

<div id="wrapper">
    <!-- right div -->
    <div id="rightDiv">
        <h1>This is my heading</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>    
    <!-- left div -->
    <div id="leftDiv">
        <h1>This is my heading</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
</div>