Keep footer div at the bottom of the page

Question

ok, really simple im sure, il i want to do is keep a div at the bottom of the page.. not the browser window so it can always be seen, but at the bottom of all the content, what information would i apply to this div? ive tried top;100% minus the height of the div, no luck, any help would be great thanks.

Answer 1

Try something like this:
First define your html code like this:
<div id="container">
     <div id="content">
          <h1>Content</h1>
          <p>Please resize the browser window to see how your 100% CSS footer behaves. </p>
          <p>Some more text here</p>
     </div>
     <div id="footer">
          <h1>Footer</h1>
     </div>
</div>
Next create your CSS like this:
<style type="text/css">
          <!--
               html, body {
                    height: 100%;
               body {
                    margin: 0;
                    padding: 0;
                    font: 12px/1.5 verdana, arial, helvetica, sans-serif;
               #container {
                    position: relative;
                    min-height: 100%;
                    height: 100%;
                    voice-family: "\"}\"";
                    voice-family: inherit;
                    height: auto;
               html>body #container {
                    height: auto;
               #content {
                    padding: 10px;
                    background-color: #a6c;
                    padding-bottom: 48px;
               #footer {
                    position: absolute;
                    bottom: 0;
                    padding: 10px;
                    background-color: #609;
                    width: 75%;
               #footer h1 {
                    color: #fff;
                    padding-bottom: 0;
               h1, p {
                    margin: 0;
                    padding-bottom: 1em;
               h1 {
                    font-size: 12px;
                    line-height: 1.5em;
          -->
          </style>
This is all there is to it in a nutshell.  It can be modified to work in old browsers but that is another question.