位于另一个div底部的div

时间:2011-10-17 22:42:43

标签: html css

我有一个div嵌套在另一个

<div id="wrapper">
  <div id="left"></div>
  <div id="right"></div>
  <div id="footer"></div>
</div>

CSS就是

#wrapper{
width:800px;
}
 #left{
 float:left;
 width: 200px;
 }
#right{
  float: left;
  width: 600px;
}
#footer{
  width:800px;
  height: 20px; 
}

如何确保页脚停留在包装div的底部?

2 个答案:

答案 0 :(得分:4)

http://jsfiddle.net/LMeZ9/

只需使用clear:both

#footer{
  width:800px;
  height: 20px;
  clear:both
}

答案 1 :(得分:1)

您可以使用定位解决此问题:

#wrapper{
width:800px;
    height: 600px;
    position: relative;
    border: 1px solid #333;
}
 #left{
 float:left;
 width: 200px;
 }
#right{
  float: left;
  width: 600px;
}
#footer{
  width:800px;
  height: 20px; 
  position: absolute;
    bottom: 0;
}

Demo here