I have been trying to remember how to create layouts in CSS and I began to experiment with the template below. In its current form it tests well in both Firefox and IE, but when I began to add DIVs and paragraphs in the content area between the header and footer, there is a difference in height from the bottom of the text to the top of the footer.
Here's the original template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
/*this height is for ie only*/
/*ie wont see this, other browsers will*/
/*Here is some visual stuff that is not needed*/
The purpose of this test page is to get content area 100% height of the viewable area, unless the content is longer, in which case the container should expand.<br />
This can be tested by looking at this page with small content (the grey area should be 100% high)<br />
And then making the browser smaller so that it can be scrolled (the text at the light grey area should stay above darker gray area)<br />
This page has been tested in folloving browsers in winxp succesfully:<br />
IE 5.0, IE 5.5, IE 6.0, Netscape 7.1, Mozilla Firebird 0.7, Opera 7.22, MyIE2 0.8.2070<br />
Known problems: In IE, the footer is 1px away from the page bottom. In Opera the page bottom is not updated unless the page is refreshed. (It still works like it is wanted, it just does not update the height on the fly.)<br />
This text should be above the footer at all times.
What your looking for is known as a "Sticky Footer" layout.
See the FAQ for in depth details on making it cross browser compatible.
How do you put a sticky footer at the bottom of the window?
The page was recently updated with notes for catering to Opera 11 and previous versions if they need to be supported.
Thanks Rayzur! I remember the sticky footer a few years back, but will it solve the height issue between IE and Mozilla?
It seems that whenever I use <br> or <div> within the content area between the header and footer it throws the height difference off by 50-100 pixels.
Known problems: In IE, the footer is 1px away from the page bottom. In Opera the page bottom is not updated unless the page is refreshed. (It still works like it is wanted, it just does not update the height on the fly.)
That quote is from your test code.
The 1px at the bottom you are seeing in IE is a border on the browser chrome. You will see that with any page that is 100% height or goes below the fold.
In Opera the page bottom is not updated...
Actually IE8 suffered from the same problem too, those fixes were included in the working sticky footer in the FAQ. Opera 11 has corrected the issue but to support older versions of Opera the fix must be left in place as well as adding clear:both to the main container.
Have you tried using that code from the FAQ yet?
This topic is now closed. New replies are no longer allowed.