Footer Position
One of the issues I had to deal with was the screen constraint. On a web application, I was told to fit all the information within 1024×768 simply to follow the same paradigm as windows application. I never understood why they want to keep it that way. When designing for the web, there are ways around it. For this project, I think it’s important for users to have the flexibility to maximize their real estate only in height and not by width.
I found this footer position that would adjust to your browser size and yet maintain footer at the bottom. The snippet below is an example how it’s done.
HTML Format
<div id="top"></div>
<div id="container">
<p>Lorem ipsum contents placement</p>
<div id="footer-spacer"></div>
</div>
<div id="footer">
Footer Position Here
</div>
CSS Format:
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
background-color: #fff;
}
#top {
position: absolute;
}
h1, p {
margin: 0;
padding: 0.3em 0;
}
#container {
min-height: 100%;
margin-bottom: -36px;
}
* html #container {
height: 100%;
}
#footer-spacer {
height: 36px;
}
#footer {
border-top: 1px solid #000;
height: 35px;
}
- Pretty simple stuff. The method above is compatible with the following browser:
- Firefox 1.0
- Firefox 2.0
- Firefox 3.0
- Chrome 1.0
- Safari 3.1.2
- IE 6
- IE 7
- IE 8 beta
- Works but buggy:
- Opera 8.54
- Opera 9.50
Here’s my own footer that I was playing with. The credit goes to electrictoolbox. Thanks to them, I was able to solve this issue at work.
Related Posts
-
Our expertise area
-
Categories