Footer Alignment

[TheWebMistress]

I am building a website in css. No tables. The footer is not aligning properly. I would like the footer with the copyright line aligned to the right (which it is) and then I would like it flush underneath the site (the orangy background). Currently, there is a gap between the bottom of the site and the copyright line.

Secondly, I would like the footer to automatically move down when more copy is added to the page. So when more copy is added and the white box expands vertically, the footer should move down too while still always being directly under the site.

I cannot figure out how to get this to work and would appreciate any tips or advice.

Here is the css styles for the footer:

div#footer {
clear: both;
background: transparent;
margin: 0 auto;
padding: 5px;
}

#footer p {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #fff;
margin: 0;
padding: 0;
text-align: right;
vertical-align: top;
}

#footer a {
color: #fff;
text-decoration: none;
}

#footer a:hover {
color: #fff;
text-decoration: underline;
}

=============================

Here is the URL to the css: http://coppercreditcard.coop/css/main.css

Here is the URL to the test site: http://coppercreditcard.coop/

Thank you! (This is my first time building a site in straight css)

[slaughters]

Go to this page: http://www.pagecolumn.com/

Choose the "2 column fixed liquid layout generator" link on the right.

Play with it until you get your basic page layout then grab the HTML and CSS as a starting point.