浮动div没有正确坐在

Question

我遇到的问题是页脚div不断上升在右侧div后面。我有一个中间包含2个浮动div并排的div，页脚是一个单独的div，不确定我在哪里出错了，但我已经在这里呆了好几个小时，不能解决问题。

这里是什么，我的意思是一个js小提琴：http://jsfiddle.net/VU3xW/

HTML：

<div id="middlecontainer"> 

     <div id="leftContent"> 

     </div> <!-- end of left content --> 


     <div id="rightContent"> 

      </div> <!-- end of right content --> 

</div> <!-- end of middle container --> 

<div id="footer"> 
      <p class="footernav"><a href="">Home</a> | <a href="">About</a> | <a href="">Products</a> | <a href="">Contact</a> 
      </p> 

      <p class="copyright">Copyright © 2013 JBA Packaging Supplies | Designed by iDesign</p> 
     </div> <!-- end of footer div --> 

CSS：

#rightContent{ 
    width: 690px; 
    height: 400px; 
    float: right; 
    background-color:#222; 
    border-bottom-left-radius: 10px; 
    border-bottom-right-radius: 10px; 
    border-top-left-radius: 10px; 
    border-top-right-radius: 10px;} 

#leftContent{ 
    display: inline-block; 
    width: 240px; 
    height: 200px; 
    background-color:#555; 
    border-bottom-left-radius: 10px; 
    border-bottom-right-radius: 10px; 
    border-top-left-radius: 10px; 
    border-top-right-radius: 10px;} 

#middlecontainer { 
    width: 960px; 
    background-color:#003;} 

#footer { 
    width: 960px; 
    background-color: #121212; 
    text-align: center; 
    border-bottom-left-radius: 10px; 
    border-bottom-right-radius: 10px; 
    border-top-left-radius: 10px; 
    border-top-right-radius: 10px;} 

#footer a{ 
    text-decoration: none; 
    list-style-type: none; 
    color:#888; 
    } 
#footer a:hover{ 
    text-decoration: none; 
    list-style-type: none; 
    color:#444; 
    } 

.footernav { 
    font-family:Arial, Helvetica, sans-serif; 
    font-size: .8em; 
    color:#444; 
    padding-top: 10px;} 

.copyright { 
    font-family:Arial, Helvetica, sans-serif; 
    font-size: .8em; 
    color:#888; 
    padding-top: 10px;} 

Answer 1

你所缺少的就是清除浮动元素

Demo

只需在容器元素的末尾添加此<div style="clear: both;"></div>，您还可以使用overflow: hidden;为父代div清除浮动。另外为了演示的目的，我已经添加了样式内联，你可以使用它，并使用它，而不是内联样式，这被认为是不好的做法..

另外，如果你想清除浮动元素，你可以使用它来自行清除父元素。

.self_clear:after { /* Use this if you wish to ditch IE8 */ 
    content: " "; 
    display: table; 
    clear: both; 
} 

<div class="self_clear"> <!-- Example usage --> 
    <div class="floated_left"></div> 
    <div class="floated_right"></div> 
</div> 

矿This answer详细的解释提供，这就是为什么你需要使用clear: both;

Answer 2

先给你一个middlecontainer溢出：汽车性能。

Answer 3

尝试添加清除用div

#clear{ 
    clear:both; 
} 

这里是小提琴http://jsfiddle.net/swDnn/1/

希望它可以帮助...

Answer 4

试试这个

http://jsfiddle.net/VU3xW/4/

#rightContent{ 
    width: 690px; 
    height: 400px; 
    float: right; 
    background-color:#222; 
    border-bottom-left-radius: 10px; 
    border-bottom-right-radius: 10px; 
    border-top-left-radius: 10px; 
    border-top-right-radius: 10px;} 

#leftContent{ 
    display: inline-block; 
    width: 240px; 
    height: 200px; 
    background-color:#555; 
    border-bottom-left-radius: 10px; 
    border-bottom-right-radius: 10px; 
    border-top-left-radius: 10px; 
    border-top-right-radius: 10px;} 

#middlecontainer { 
    width: 960px; 
    background-color:#003;} 

#footer { 
    width: 960px; 
    background-color: #121212; 
    text-align: center; 
    border-bottom-left-radius: 10px; 
    border-bottom-right-radius: 10px; 
    border-top-left-radius: 10px; 
    border-top-right-radius: 10px;} 

#footer a{ 
    text-decoration: none; 
    list-style-type: none; 
    color:#888; 
    } 
#footer a:hover{ 
    text-decoration: none; 
    list-style-type: none; 
    color:#444; 
    } 

.footernav { 
    font-family:Arial, Helvetica, sans-serif; 
    font-size: .8em; 
    color:#444; 
    padding-top: 10px;} 

.copyright { 
    font-family:Arial, Helvetica, sans-serif; 
    font-size: .8em; 
    color:#888; 
    padding-top: 10px;} 

Answer 5

您的页脚需要清除所以加明确：就是每个浮动DIV之后无论是在#footer的

#footer { 
    clear:both; 
     width: 960px; 
     background-color: #121212; 
     text-align: center; 
     border-bottom-left-radius: 10px; 
     border-bottom-right-radius: 10px; 
     border-top-left-radius: 10px; 
     border-top-right-radius: 10px;}