user544079
user544079

Reputation: 16639

position div at the bottom of another div

I have a div nested inside another

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

THE CSS is as

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

How can i ensure that the footer stays at the bottom of the wrapper div?

Upvotes: 2

Views: 7606

Answers (2)

Richard Andrew Lee
Richard Andrew Lee

Reputation: 1177

http://jsfiddle.net/LMeZ9/

just use clear:both

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

Upvotes: 4

Kyle
Kyle

Reputation: 67244

You can solve this by using positioning:

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

Upvotes: 1

Related Questions