Oh helllooooo!
This is almost exactly as I want it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test</title>
<style type="text/css">
html, body {
height:100%;
margin:0;
padding:0;
}
body {
text-align:center;
}
#outlinefindmid {
height:50%;
width:1px;
margin-bottom:-300px; /* half the wrappers height */
float:left;
}
#header{
margin:0 auto; /* use if centering horizontally */
text-align:left; /* set text back to default if centering horizontally */
position:relative;
height:50px;
width:850px;
clear:left;
border: 0px solid red;
background-color: blue;
}
#nav{
margin:0 auto; /* use if centering horizontally */
text-align:left; /* set text back to default if centering horizontally */
position:relative;
height:25px;
width:850px;
clear:left;
border: 0px solid red;
background-color: green;
}
#content{
margin:0 auto; /* use if centering horizontally */
text-align:left; /* set text back to default if centering horizontally */
position:relative;
height:500px;
width:850px;
clear:left;
border: 0px solid red;
background-color:white;
}
#contentfindmid {
height:50%;
width:1px;
margin-bottom:-200px; /* half the wrappers height */
float:left;
}
#innercontent{
margin:0 auto; /* use if centering horizontally */
text-align:left; /* set text back to default if centering horizontally */
position:relative;
height:400px;
width:850px;
clear:left;
border: 0px solid red;
background-color:white;
}
#innercontentfindmid {
height:50%;
width:1px;
margin-bottom:-50%; /* half the wrappers height */
float:left;
border: 0px solid green;
}
#innercontentmain{
margin:0 auto; /* use if centering horizontally */
text-align:left; /* set text back to default if centering horizontally */
position:relative;
width:850px;
clear:left;
border: 0px solid red;
background-color:yellow;
}
#footer{
margin:0 auto; /* use if centering horizontally */
text-align:left; /* set text back to default if centering horizontally */
position:relative;
height:25px;
width:850px;
clear:left;
border: 0px solid red;
background-color: blue;
}
</style>
</head>
<body>
<div id="outlinefindmid"></div>
<div id="header">
HEADER
</div>
<div id="nav">
NAV
</div>
<div id="content">
<div id="contentfindmid"></div>
<div id="innercontent">
<div id="innercontentfindmid"></div>
<div id="innercontentmain">
<h1>CONTENT</h1>
<p>content</p>
</div>
</div>
</div>
<div id="footer">
FOOTER
</div>
</body>
</html>
When you add or remove some of the content, the size of the area underneath the content is automatically modified. My ideal solution was that the content (yellow bit) would be right in the middle of the white bit, and the areas above and below the content were BOTH automatically adjusted to keep the re-sized content in the middle, however, this will certainly do (for now).
The main problem I had was that, without the changeable white bit underneath the content, the footer moved every time the content was modified. This has solved that, which is a start! (If it doesn't work when I try it on IE6 tomorrow in work, I really will kill someone!)