I am having the classic problem for the positioning of a Footer on the bottom of the browser. I've tried methods including http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ but to no good result: my footer always keeps appearing in the middle of the browser window in both FF and IE.
In the HTML i got this simple structure
<form>
...
<div class=Main />
<div id=Footer />
</form>
Here is the css code that is relevant for the css footer problem:
*
{
margin: 0;
}
html, body
{
height: 100%;
}
#Footer
{
background-color: #004669;
font-family: Tahoma, Arial;
font-size: 0.7em;
color: White;
position: relative;
height: 4em;
}
.Main
{
position:relative;
min-height:100%;
height:auto !important;
height:100%;
/*top: 50px;*/
margin: 0 25% -4em 25%;
font-family: Verdana, Arial, Tahoma, Times New Roman;
font-size: 0.8em;
word-spacing: 1px;
line-height: 170%;
/*padding-bottom: 40px;*/
}
Where am I doing wrong? I really have tried everything. If I missed any useful info please let me know.
Thank you for any suggestion in advance.
Regards,
thank you all for your answers. it worked with:
position:absolute;
width:100%;
bottom:0px;
setting position:fixed did not work in IE for some reason(Still showed footer in the middle of the browser), only worked for FF.
Try setting the styles of your footer to position:absolute;
and bottom:0;
.