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.
For example I took a screenshot and in Mozilla it’s 385 pixels between content and footer. But in IE it’s 435 pixels! What’s the best way to solve this height issue without using javascript hacks?
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>sample</title>
<style type="text/css">
body, html{
height:100%;
text-align:center;
margin:0px;
padding:0px;
}
#main,#header,#footer,#cleaner{
margin-left:auto;
margin-right:auto;
width:800px;
text-align:left;
}
#main{
/*this height is for ie only*/
height:100%;
min-height:100%;
margin-bottom:-50px;
}
/*ie wont see this, other browsers will*/
body>div#main{
height: auto;
}
#header, #footer,#cleaner{
height:50px;
}
/*Here is some visual stuff that is not needed*/
body{background:#ffffff;}
#main{background:#EEEEEE;}
#header, #footer{background:#DDDDDD;}
</style>
</head>
<body>
<div id="main">
<div id="header">header</div>
Content<br />
<br />
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 />
<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 />
<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 />
<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 />
<br />
This text should be above the footer at all times.
<div id="cleaner"></div>
</div>
<div id="footer">footer</div>
</body>
</html>
Thanks
