How to sitck the footer at the bottom of the browser window??! [Archive]

Doido

04-01-2009, 12:58 PM

Hello guys,

I am writing, because I really tried everything to stick the footer of my page at the bottom of the browser screen and then make the page expand automatically for different resolutions, but I did not succeed!

I already tried using height=100%, put the min-height of the container=100% and its position=relative and putting the body,html height=100%, but nothing worked!!!

Im sending the layout of the page.... If you have any idea, do not hesitate to contact me! Thank you a bunch!

html{height:100%}

body {
background-color: #02AC7D;
background-image:url(../Images/relevo_3.jpg);
background-position:center;
background-repeat:repeat-y;
text-align: center;
height: 100%;
border: 0;
margin: 0;
}

.twoColFixLtHdr #container {
width: 950px;
background: #FFFFFF;
text-align: left;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
margin-top: 0px;
min-height: 100%;
position: relative;
}

.twoColFixLtHdr #header1 {
background: #DDDDDD;
height: 150px;
background-image: url(../Images/Fond_up_2.jpg);
padding: 0;
}

.twoColFixLtHdr #header2 {
background: #DDDDDD;
height: 35px;
padding: 0;
}

.twoColFixLtHdr #sidebar1 {
float: left;
width: 160px;
background: #FFFFFF;
padding: 0;
height: 100%;
}
.twoColFixLtHdr #mainContent {
margin: 0 0 0 160px;
padding: 0 20px;
}
.twoColFixLtHdr #footer {
background-image: url(../Images/rodape_2.jpg);
height: 60px;
width: 950px;
position: relative;
margin: 0;
}

.clearfloat { /
clear:both;
height:0px;
font-size: 1px;
line-height: 0px;
}