Over the next few weeks, I'm going to be moving over some of the posts from the blog on my old site. This is the first of those. Anyway, here is something I had to work through recently and didn't want to have to hunt down again in the future. I also felt it might be useful to other folks as well - surely I'm not the only one that has tried to do this.
After spending too much time trying to find a good way to position a footer centered at the bottom of a browser window, I finally decided I would have to develop my own solution. What I wanted was something that would essentially dock itself to the bottom of the browser but not cover any of the content on the rest of the page. If the page had a lot of content, this wasn't a hard thing to do. But if the page was short, I didn't want the footer to appear just below the bottom of the content, leaving a gap between the bottom of the footer and the bottom of the browser window. The solutions I was finding either left the gap, or some would cause the footer to cover any content that required the page to scroll (it fixed the footer to the bottom of the browser and not to the bottom of the content).
I came up with this fairly simple solution that appears to work in IE, Firefox and Chrome.
<html lang="en">
<head>
<style>
body, html {
height:100%;
}
body {
margin:0px;
padding: 0px;
font-family:"Lucida Sans", Verdana, Tahoma, Helvetica, sans-serif;
}
#wrapper {
text-align:center;
width:100%;
margin:0px;
padding:0px;
min-height:100%;
}
#content {
height:100px;
width:500px;
background-color:#CCCCCC;
color:#333333;
margin:0px auto;
text-align:center;
}
#footer_container {
position:relative;
height:100px;
width:100%;
margin:-100px auto 0 auto;
text-align:center;
}
#footer_content {
height:100px;
width:500px;
margin:auto;
background-color:#333333;
color:#CCCCCC;
}
</style>
</head>
<body>
<div id='wrapper' style='{IE only rules follow:} height:100%;'>
<div id='content'>
<br>
Content Area
</div>
<div id='pad' style="height:100px">
<!--// //-->
</div>
</div>
<div id='footer_container'>
<div id='footer_content'>
<br>
Footer
</div>
</div>
</body>
</html>
In the CSS above, the font and color definitions are optional (just to make things clear in the demo below), but almost everything else is required to make this work. Here are some explanations:
- The footer_container is placed below the wrapper and the top margin is set to minus the height of the footer
- The pad div is required to prevent the footer from covering content in the wrapper. This should be an empty div
- The height of the footer, the height of the pad, and the negative margin of the footer_container must all be the same value.
- Don't forget to include the conditional style in the wrapper div - IE doesn't recognize min-height and height must be explicity set.
Check out the
Bottom Centered Div Demo to see this in action.
Comments