PDA

View Full Version : make footer float at bottom of page



mjbasford
Jul 20th, 2010, 01:08 AM
okay, so what i am trying to figure out is how to make my footer float at the bottom of the page. i am currently using absolute positioning to dictate everything and ti works great, but on secondary pages with different amounts of content, it sits too high or too low without defining an additional div in my css doc. so here is the code, please let me know what i could do to make everything line up the same, but float depending on the amount of content. Thank you very much

Mike

edit:: BTW the navbar sits above this. MAin content in in center, left is blank and right has misc content. footer is branding and contact info


#mainleft {
position:absolute;
top:250px;
width:25%;
background:#fff;
height: 800px;
border-right-style:dashed;
border-right-width:thin;
}

#maincenter {
position:absolute;
top:250px;
width:49%;
left:25%;
height: 800px;
text-align:center;
padding: 0 20px;
font-family:Verdana, Geneva, sans-serif;
font-size:14px;

}

#mainright {
position:absolute;
top:250px;
width:25%;
left:75%;
background:red;
height: 800px;
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
}

#footer-main {
position:absolute;
background-color:#CCC;
border-style: solid;
border-width: 5px 1px 0;
border-color: green transparent transparent;
padding: 5px 14px 0;
text-align:center;
width:80%;
right:10%;
top:1070px;

}

_Aerospace_Eng_
Jul 20th, 2010, 01:46 AM
http://www.cssstickyfooter.com/

The above is the simplest method I know for having a sticky footer.

mjbasford
Jul 21st, 2010, 01:28 AM
okay, so i went there and have tried what i read, and i guess i still screwed something up. im using colors as place holders and making a dummy page to test currently, and it seems that the colors (which if i understand the min height correctly) should be 100% of the screen excepting the paddings. so i have a padding for the header and nav on top, and padding for footer on bottom. What i am getting is proper padding on top, the color blocks equal to padding then lots of white space with a vertical scroll bar and then the footer. any input is much appreciated

what i am trying to acheive is 100% screen fill with sticky footer

thanks

css code


html, body {height: 100%;}

#wrap {
padding-top:150px;
min-height: 100%;
}

#center {
width:50%;
overflow:auto;
padding-bottom: 150px;
background-color:green;
float: right
}
#left {
overflow:auto;
padding-bottom: 150px;
width:25%;
background-color:blue;
float: right
}
#right {
overflow:auto;
padding-bottom: 150px;
width:25%;
background-color:red;
}
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
background-color:#999;
}
and html


<div id="wrap">

<div id="left">
</div>

<div id="center">
</div>

<div id="right">
</div>

</div>

<div id="footer">
</div>

_Aerospace_Eng_
Jul 21st, 2010, 03:25 PM
Remove the top padding on #wrap and you have your sticky footer. You can't add a top padding to wrap because it makes it more than 100% so you'll get an excessive scrollbar.