Need copyright to stay on bottom - html

Question

Here is the html:
<div id="terms" class="terms">
<center>Terms & Conditions
</div>
CSS:
# terms {
width: 100%;
position: absolute;
bottom: 0;
}
.terms {
width: 100%;
position: relative;
bottom: 5px;
}
WHAT AM I DOING WRONG? I have tried probably 50 different variations of html and css to get the terms to stay on the bottom of the page, but it is floating around in the center of the page. it will go from the top to the middle to the right and left but i cannot get it to float to the bottom of the page! the entire page is set up as two floating columns .right and .left
PLEASE HELP!! thank you!

Answer 1

I've set up a fiddle for you:
http://jsfiddle.net/uh53X/1/
Modify your code as follows:
HTML
<div class="terms">
<center>Terms & Conditions</center>
</div>
CSS
div.terms{
display:block;
position:absolute;
bottom:0;
right:0;
width:100%;
background:#eee;
border:1px solid #ddd;
}
Hope this helps.

Answer 2

please refer to the below demo
CLICK HERE FOR DEMO
HTML
<div class="wrapper">
<div id="terms">
<center>Terms & Conditions</center>
</div>
</div>
CSS
.wrapper{
width:500px;
height:500px;
}
#terms {
position: fixed;
bottom:5px;
width: 100%;
left:0px;
height:25px;
}
UPDATED AS PER THE COMMENT:
CLICK FOR DEMO 2
HTML
<div class="wrapper">
<div class="pageBox">
<p>
This is test page height will be managed accordingly and footer will be attached after this box.
</p>
<p>
This is test page height will be managed accordingly and footer will be attached after this box.
</p>
<p>
This is test page height will be managed accordingly and footer will be attached after this box.
</p>
<p>
This is test page height will be managed accordingly and footer will be attached after this box.
</p>
<p>
This is test page height will be managed accordingly and footer will be attached after this box.
</p>
</div>
<div id="terms">
<center>Terms & Conditions</center>
</div>
</div>
CSS
.wrapper{
width:500px;
}
.pageBox{
height:auto;
}
#terms {
width: 100%;
height:25px;
}

Answer 3

Do you want to stick the footer to the bottom of the page regardless of how much content you have in it? - sticky footer, this is what I use for when I want to anchor my footer to the bottom (although from the look of your example pages it might not be what you're after)
or do you just want to make sure it sits underneath the last item in your page? why not just add a clearing div/br underneath your last item and before the terms
.clearboth {
font-size: 1px;
line-height: 0px;
clear: both;
height: 0px;
}
<br class="clearboth" />
Then regardless of floats on either side you can just have your div sat underneath that as a regular item
Hope either of these helps