我遇到的问题是页脚 div 在右侧 div 后面不断上升。我有一个包含 div 的中间部分,其中 2 个浮动 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;}