Center Footer Fixed At The Bottom Ie
I am coding a web interface for a University project and I have been dealing with this issue: I want my footer fixed at the bottom so it is in place no matter which screen I am usi
Solution 1:
CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -150px; /* the bottom margin is the negative value of the footer's height */
}
#footer, #push {
height: 150px; /* #push must be the same height as #footer */
}
HTML:
<body><divid="wrapper"><!-- ALL non-footer content goes in this DIV. --><divid="push"></div></div><divid="footer"><ulid="breadcrumbs"><li>Disclaimer</li><li> | Icons by: <ahref="http://dryicons.com/"rel="shadowbox">dryicons.com</a></li><li> | Website by: <ahref="http://www.eezzyweb.com/"rel="shadowbox">eezzyweb</a></li><li> | <ahref="http://jquery.com/"rel="shadowbox">jQuery</a></li></ul></div></body>Code adapted from http://ryanfait.com/sticky-footer/
I've used this approach on several sites I've developed, including my personal site. It works great! And even in IE6 (even though you said it doesn't need to).
Solution 2:
margin: auto; is what's broken in IE7.
You can go around it with
#footer {
width: 100%;
left: 0px;
}
, since that way the div stretches to full width and the ul will auto-align to the middle. But maybe that's not what you want.
If it's not an acceptable solution, people on the web say you can fix it with aligning the parent's text to the center - but that might screw the remainder of the layout... you'll have to play around with it, but at least you know what's going bad.
Solution 3:
html,
body {
height: 100%;
}
#wrapper {
position: relative;
height: auto !important;
height: 100%;
min-height: 100%;
}
#footer{
left: 0;
}
Post a Comment for "Center Footer Fixed At The Bottom Ie"