Auto height content DIV/Always bottom footer

[mgebril]

Hi guys, I'm trying to create a page that has:

- keeping footer DIV at the bottom of the page
- Making content DIV 100% of the browser height unless content is taller than DIV height.
- CSS rounded corners of DIVs (content/footer).

I'm using curvycorners.js that's attached here.

So, the structure of the webpage would be something like:

HTML:
<div id="site-wrapper">
<div id="site-header"> Header goes here </div>
<div id="site-content">Content goes here</div>
<div id="site-footer">Footer goes here</div>
</div>



CSS:
body
{
margin: 0px;
padding: 0px;
background-color: #FFF;
height: 100%;

}


#site-wrapper {
padding: 0px;
width: 1024px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}


#site-header {
margin: 0px;
padding: 0px;
float: left;
height: 115px;
width: 100%;
}



#site-content{

position:absolute;
top:130px;
padding-top: 10px;
bottom:30px;
width: 1024px;
margin-right: auto;
margin-left: auto;
margin-bottom: 8px;
color: #3e3e3e;
text-align: left;
background-color: #f3f3f3;
vertical-align: top;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}


#site-footer {
display:block;
position: absolute;
bottom: 0;
height: 20px;
width: 1024px;
background-color: #666;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.75em;
font-weight: normal;
color: #FFF;
text-align: center;
vertical-align: middle;
vertical-align: middle;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
padding-top: 10px;
}


I have a problem when the content DIV is taller the screen, I cannot get the height automatically adjusted with the footer DIV appearing at the bottom of the page! Am I doing something wrong here? Necessary amendments should work in all browsers, please!

I appreciate if you have any suggestions.

Thanks!

[mgebril]

Please let me know if you have any suggestions. Thanks!