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.