Note: By mistake I deleted the original post (dated 08.08.05), so I’m posting it again 
While I was working on a big project at work, I happened to use CSS a lot and gained a bit of experience and a better understanding on how to manipulate elements and all that stuff.
Well, by doing lots of ‘experiments’ I came up with a technique (which, by the way, I haven’t seen anywhere else) that would make a page have its header and footer to the top and bottom of the browser window as if it was made using tables. I have an example where you can see what I mean.
The layout, consists only of a header, contents and footer. This is just the ‘begining’ because I am still experimenting to expand this technique to use it with columns too.
Now going back to the topic, in my research to find a way to accomplish what I wanted, I always found examples where the container would hold the header, contents and footer… but this wouldn’t produce the results I wanted.
By the way, although I’m not a writer, I will do my best to explain this technique; please bear with me.
This technique consists of placing the header and the contents inside the container only. The footer will be placed outside the container; this will allow us to ‘push’ the footer all the way down and manipulate its position.
In the definition of the container id, we define a height of 100% for Internet Explorer and create a filter for Firefox and other CSS2 compliant browsers like so:
html>body #container {
height: auto;
min-height: 100%;
}Internet Explorer will automatically expand if the contents are larger than the 100% of the screen. In the filter, we define a height with its value set to auto so if the contents are larger than the 100% the screen they won’t overflow outside the container; if we don’t set the min-height to 100%, the contents div will not expand all the way to the bottom of the screen if the contents div is either empty or with few text.
Then, we define the contents div like so:
#contents{
padding: 10px 10px 100px 10px;
}As you can see, we set the bottom padding to 100px. The reason for this is so the footer won’t overlap over the header if there is no text in the contents div and to leave some space in between both of them if the browser window is resized to a small size.
Finally, we define the footer div as follows:
#footer{
position: relative;
bottom: 0;
background-color: #f90;
margin: -100px auto 0 auto;
height: 100px;
width: 760px;
}Since the position of the footer is set to relative, it will be pushed down all the way to the bottom, even beyond the 100% of the user’s screen. For this reason, as you can see in the definition, we give it a top margin of -100px (which is the same value of the footer’s height) and then we give it the same positioning and width values as the container so that they align as they should.
That’s it! You can take it from here and tweak it as needed. See the source code for more details.I hope this technique helps and saves you some time 
.
Buggy in Opera 7.5. It won’t automatically resize until you reload the page.
Works fine in:
- Windows XP
- Firefox 1.4
- Internet Explorer 6.0
- Macintosh
- Linux (Fedora Core 3)
- Firefox 1.4
- Konqueror 3.4
Doesn’t work:
- Internet Explorer 5.2 (Macintosh)
) way to accomplish this”. True, I could just copy, paste and use his code, modify the .htaccess file (or add the MIME type to the Apache server) but still… 
Recent Comments