CSS layout problems
Posted: Tue May 23, 2006 5:11 pm
Code: Select all
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" >
<head>
<base href="" />
<title>Learning CSS</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-Type" content="text/html; charset=UTF-8" />
<meta name="generator" content="" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
}
#html_container {
background-color: lightgrey;
width: 100%;
height: 100%;
}
#header {
background-color: green;
width: 100%;
}
#body {
background-color: purple;
width: 100%;
height: 100%;
}
#footer {
background-color: orange;
width: 100%;
}
-->
</style>
</head>
<body>
<div id="html_container">
<div id="header">
Footer
</div>
<div id="body">
Here is some body text and stuff YO!!!
</div>
<div id="footer">
Header
</div>
</div>
</body>
</html>This is what I was afraid of
Often my designs include a header, menubar, body and footer...
I typically like my the entire layout to be *fluid* in that even though there may be ZERO body content, the footer is still displayed flush at the bottom of the web page...only when there is more text than the window can handle do I I accept the footer being pushed down...
But by no means do I like the footer being butt up against the bottom of my content...that just looks UGLY!!!
IE renders the above code sort of like I would expect, but the body container assume 100% of the height of the document, not just what it has left to play with considering the header(s) and footer(s) that may exist...
This is possible to achieve using tables and I believe is even cross browser friendly...
At least in FF and IE anways
Can someone either offer me a cross browser fix or suggestion? Obviously being STRICT is important to me, as I am an extremist
Cheers