Sat, 2004-11-13 04:28
Positioning footers can be difficult.
Browsers all seem to handle bottom positioning differently.
The best advice I can give is to position the footer after the other content but still in the document flow. In other words have the footer and the content before it positioned relative or floated and cleared.
Many people try to position the footer at the bottom of the page is the content is short. With CSS alone thanks to all the differences between browsers this is not as simple as it seems.
Here's a method that should get you close :?
First you need to make the body of the document fill the viewpoint.html, body{height:100%;} Now IE will expand the height of a box given a height to fit the content. Other browsers need to be given a min-height of 100% for the body and while where at it will get rid of margin and padding.
html, body{height:100%;
margin:0;
padding:0;
min-height:100%;} Then you need to find a way to push the footer to the bottom of the window or down to the end of the content if the content is longer.There are at least two ways to do this and many versions of each of them and non that I know of work 100% across all browsers.
The most common way is to position the footer with bottom:0; absolutely or relative. You have to be careful with this as if the content grows or is longer then the viewpoint the footer may cover some content.
The other method is to expand the content container and fit the footer after it.
This is the method I will use here.
Since as we mentioned before IE will expand the container give a height to fit the content we need to give IE a height. We also want to leave room for the footer so we will give IE 95% height.
* html #contents{height:95%;}Then we need to give other browsers that handle height correctly and understand min-height a value.
#contents{min-height:95%; margin:0; position:relative;} Then all we need to do is sit the footer after contents. #footer{position:relative; height:5%;}This will be pretty close in most browsers, I have tested it in:
IE5 and IE6 on windows (works),
Opera 7.54 Linux (works),
Firefox (works),
Konqueror Linux ( footer positioned straight after content).
As you can see it is far from perfect :roll: I'd like to here results from other browsers then maybe we can fix a few problems and improve the solution.
To fix Firefox and other Mozilla based browsers we can add top:5%; to the footer style.
That will then mess up Opera and IE a little, so we can either target IE and Opera or Mozilla.
I think it's easier to target IE nad Opera
* html #footer{top:0;} /*IE */
| * > #footer{top:0;} /* Opera using CSS3 selectors that other browsers will support later, look out */
Here's the whole lot:
html, body{
height:100%;
margin:0;
padding:0;
min-height:100%;
}
#contents{
min-height:95%;
margin:0;
position:relative;
}
/* holly hack to target IE win Only \*/
* html #contents{
height:95%;
}
/* end hack */
#footer{
position:relative;
top:-5%;
height:5%;
}
* html #footer{ /*IE */
top:0;
}
| * > #footer{ /* Opera using CSS3 selectors that other browsers will support later, look out */
top:0;
}and the basic markup
<body> <div id="contents"> main content</div> <div id="footer">footer </div> </body>
Here's another great article on footers http://www.alistapart.com/d/footers/
Tue, 2005-08-30 11:13
#1
Footers
The Man in Blue has come up with a simpler method of placing a footer at the bottom of the screen or after the content, whichever comes last, footerStickAlt.
footerStickAlt has been tested and passed in Internet Explorer 5.01 for Windows, Internet Explorer 5.5 for Windows, Opera 7.51 for Windows, Opera 8.0 for Windows, Internet Explorer 6 for Windows, Firefox 1.04 for Windows, Firefox 1.02 for OSX & Safari 1.3 for OSX.