I’d like to create the following div layout,
HEADER = To always be positioned at the top of the page
BODY = To resize depending on the position of the footer
FOOTER = To always sit at the bottom of the page
So far I’ve attempted this:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
margin: 0px;
}
#header {
background-color: #000;
height: 150px;
width: 800px;
margin-right: auto;
margin-left: auto;
}
#body {
height: 300px;
width: 800px;
background-color: #CCC;
margin-right: auto;
margin-left: auto;
}
#footer {
height: 150px;
width: 800px;
background-color: #F00;
margin-right: auto;
margin-left: auto;
position: absolute;
bottom: 0px;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</body>
</html>
My header is fine and I’ve gotten the footer to sit at the bottom of the page, but for some reason have lost my middle positing, and the part I don’t know how to is to make the body div resize appropriately?
