css - float :right appears a line below the left one 上的右 div

Question

这是我的问题。

我有一个包装器 div(宽度:800px 和高度:250px)，其中包含两个 div，占据了所有高度空间并将它们的宽度分成两半。

我设置了我的 css，将右侧的 div float 为 float: right，这一个出现在它应该出现的位置但“低于”另一个，超出了包装 div 空间(这甚至不应该是可能的)。

我同时发布了 jdfiddle 和代码。

JS fiddle 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 为 leftDiv 的 div 之上。就是这样。

这是 WORKING SOLUTION

代码:

<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>