Customize content footer

Question

I use this site.

Purpose:
I want to move the footer based on the content of each page.

1) If there is more content, I want to put a footer after the content.
2) I want to fix the footer at the bottom of the window if there is no such content in the next image.

alt text http://www.freeimagehosting.net/uploads/e893eac88b.png

My existing CSS:

I am currently using the min-height property in #content so that the footer is at the bottom.

#footer_outer{
    width:100%;
    background:#444;
    padding:10px 0 0 0;
    margin-top:50px;
    height: 130px;
}

#footer {
    margin:0 auto;
    width:834px;
    height:auto;
    overflow:hidden;
}

#content {
    padding:5px;
    margin:0 auto;
    width:890px;
    height:auto;
    min-height:450px;
}

body {
    font-family:'Helvetica Neue', helvetica, arial, sans-serif;
    color:#757575;
    font-size:14px;
    padding:0;
    margin:0;
    background:#FAFAFA;
}

Please help me achieve my goal. Thank you very much in advance.

Regards, vaths

Answer 1

1. divs

http://www.dailycoding.com/Posts/creating_always_visible_div_using_css.aspx

CSS

#footer {
    margin:0 auto;
    width:834px;
    height:auto;
    overflow:hidden;
    position: fixed;
    bottom: 0px;
}

2.

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page