How to let short content pages reach the bottom of the browser window and then a footer should appear.

Question

In this case, I've developed a CSS code for this web application ..and sometimes the resulting data is too small and the footer of the site appears in the middle of the page and looks odd.

I'd like to push that whitespace of the background to the browser's bottom and then followed by a footer. AND if the page is long, that text won't get overlapped by the footer.

Can someone help me out with this code right here?

I've been trying to use some of the codes I found on this page:http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page which talks about pretty much the same issue, but I can't get it completely done:
What am I doing wrong ?

@charset "utf-8";
body {
    margin: 0;
    padding: 0;
    text-align: center;
    height:100%;
    position: relative;
    height:100%; /* needed for container min-height */
    }
.spacer {
    clear: both;
    height: 0;
    margin: 0;
    padding: 0;
    font-size: 0.1em;
}
.spacer_left {
    clear: left;
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 0.1em;
}
hr {
    height: 1px;
    margin: 20px 0 20px 0;
    border: 0;
    color: #ccc;
    background: #ccc;
}
#container {
    position:relative; /* needed for footer positioning*/
    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */

    width: 1160px;  /* width of the site ! */
    margin: 0 auto;
    padding: 0;
    border: 1px solid #333;
    text-align: left;
}
/* Context Bar */ 
h1#contexto {
    background:url('../images/menubarbg2.png');
    width:1160px;
    height:30px;
    position:relative;
    margin-top:10px;
    visibility: inherit;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}
#header {
    margin: 0;
    padding: 5px;
    height:70px;
}
h1#titulo {
    margin: 0;
    padding: 0 0 0;

}
#content {

 margin: -15px 20px 0 20px;
 /*padding: -6px 5px 20px 5px;*/
 padding:1em 1em 5em; /* bottom padding for footer */

}
div#content.columns {
    margin-left: 100px;
}
#content abbr, #content acronym {
    cursor: help;
    border-bottom: 1px dotted;
}
#content ul {
    list-style-type: square; 
}
#content ul li, #content ol li {
    margin: 0 0 0.4em 0;
    padding: 0; 
}
#content blockquote {
    width: 75%;
    margin: 0 auto;
    padding: 20px;
}

#footer  
{
 margin: 0;
 height: -30px;
 padding: 5px;
 clear: both;
 bottom:0; 
 position:relative;
}

UPDATE: THE SOLUTION

@charset "utf-8";
body, html {
    margin: 0;
    padding: 0;
    text-align: center;
    position: relative;
    height:100%; /* needed for footer positioning*/
}
.spacer {
    clear: both;
    height: 0;
    margin: 0;
    padding: 0;
    font-size: 0.1em;
}
.spacer_left {
    clear: left;
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 0.1em;
}
hr {
    height: 1px;
    margin: 20px 0 20px 0;
    border: 0;
    color: #ccc;
    background: #ccc;
}
#container {
    position:relative; /* needed for footer positioning*/
    min-height: 100%;/* needed for footer positioning*/
    height: auto !important;/* needed for footer positioning*/
    height: 100%;/* needed for footer positioning*/
    margin: 0 auto -30px;/* needed for footer positioning*/
    width: 1160px;
    padding: 0;
    border: 1px solid #333;
    text-align: left;
}
#header {
    margin: 0;
    padding: 5px;
    height:70px;
}
h1#titulo {
    margin: 0;
    padding: 0 0 0;
}
h1#contexto {
    background:url('../images/menubarbg2.png');
    width:1160px;
    height:30px;
    position:relative;
    margin-top:10px;
    visibility: inherit;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}
#content {
    margin: -15px 20px 30px 20px; /* needed for footer positioning*/
}
div#content.columns {
    margin-left: 100px;
}
#content abbr, #content acronym {
    cursor: help;
    border-bottom: 1px dotted;
}
#content ul {
    list-style-type: square;
}
#content ul li, #content ol li {
    margin: 0 0 0.4em 0;
    padding: 0;
}
#content blockquote {
    width: 75%;
    margin: 0 auto;
    padding: 20px;
}
#footer, .push /* needed for footer positioning*/ {
    padding: 5px;
    clear: both;
    position:absolute;/* needed for footer positioning*/
    bottom:0;/* needed for footer positioning*/
    height: -30px;/* needed for footer positioning*/
    width:1150px;
}

Answer 1

Try looking at Ryan Fait's 'sticky footer' solution: http://ryanfait.com/sticky-footer/

Answer 2

You can get a "sticky footer" by having the body height equal to the height of your browser window (ie: setting the height to 100%), then forcing the footer to be at the bottom of whatever height your browser window is.

CSS:

body {
    height: 100%;
    position: relative;
}

#footer {
 position:absolute;
 bottom:0;
 height:60px;
 background:#ccc;
}

HTML:

<html><body>

 text here text here

 <div id="footer">
  Im in the footer and bottom of the page!
 </div>

</body></html>