Maybe there is a better more automagic way of doing this but I couldn’t think of it. Since I’ve had to do it three times lately I thought this time I’d post it.
here is the html code:
<?xml version=”1.0″ encoding=”UTF-8″?>
<!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>
<title>Basic Shell</title>
<link href=”reset.css” rel=”stylesheet” type=”text/css” media= “all”>
<link href=”structure.css” rel=”stylesheet” type=”text/css” media= “all”>
</head>
<body>
<div id=”wrapper_page”>
<div id=”wrapper_head”>
<div id=”page_head”>Head</div>
</div>
<div id=”page_body”>Body</div>
</div>
<div id='wrapper_foot'>
<div id='page_foot'>
Footer
</div>
</div>
</body>
</html>
and here is the css (less the reset.css, I use the same one all the time, you can download it below if you’d like)
body, html {
width:100%;
height:100%;
margin: 0px;
padding: 0px;
}
body {
background-color:#fff;
margin: 0px;
padding: 0px;
font-family:”Lucida Sans”, Verdana, Tahoma, Helvetica, sans-serif;
}
#wrapper_page {
width:100%;
min-height:100%;
margin: 0px;
padding: 0px;
border:0px solid blue;
}
#wrapper_head {
border:0px solid blue;
width:100%;
height:100px;
margin, padding:0px;
background-image:url(sprite-bg.jpg);
background-position: center top;
background-repeat: repeat-x;
}
#page_head {
width:960px;
height:100px;
margin:0px auto;
}
#page_body {
width:960px;
height:100px;
margin:0px auto;
}
#wrapper_foot {
width:100%;
height:150px;
margin:-150px auto 0 auto;
background-image:url(sprite-bg.jpg);
background-position: center bottom;
background-repeat: repeat-x;
}
#page_foot {
width:960px;
height:150px;
margin:auto;
}
here is a zip with the 3 files DIV_at_bottom_of_page.zip
CSS Shell with DIV at the bottom of the page
Jun, 13 -- Categories: Uncategorized