Forum Moderators: not2easy
I'm fairly new to css, especially when trying to use it for positioning and layout. I would like to implement a simple layout, that is, a header, a main body and a footer. The footer should be positioned at the very bottom of the page, however this should be able to move if the content in the main body becomes larger than the page. I think i've kinda' got this right, however my footer will not position itself centered how i would like. I currently have three div's, one is acting as a container (#MainContainer) and the other two (#Header and #Footer) are contained within this. Is this correct? Please use the code below to see what i mean:
<?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></title>
<style type="text/css" media="screen">
body {
margin:0;
padding:0;
background-color: #ffffff;
text-align: center;
position:static;
height:100%; /* this is the key! */
}
#MainContainer {
height:100%;
border:1px solid #333;
width: 600px;
}
#Header {
height: 50px;
border:1px solid #333;
width: 600px;
}
#Footer {
height: 50px;
border:1px solid #333;
width: 600px;
left: 0px;
bottom: 0px;
position: absolute;
}
</style>
</head>
<body>
<div id="MainContainer">
<div id="Header">
<p>Header</p>
</div>
<div id="Footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
Thank's in advance for any help,
Jon,
UK.
Jon.
I needed to add:
position: relative;
to #MainContainer.
Thank's anyway,
Jon.
Do you have sidebars (navigation menus) on that page as well? I set mine up in the 3 column style and my content section (the main body in the middle) uses relative positioning as well. But I find the top is lower on the page than the sidebars that use absolute positioning.
Bizarre.
Darrin
very tricky - making a footer sit below any content you have is easy.. but forcing it to remain at the bottom of which ever screen all the time.. it's a bit more tricky.
the best idea I have involves setting the bottom to fixed - but that WON'T work in IE - unless you use about 12K worth of JavaScript.
the next best "solution" I can think of (in quotes cuz I'm not sure it's that great) is this:
<!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">
<head>
<title></title>
<style type="text/css" media="screen">body {
margin:0;
padding:0;
background-color: #ffffff;
text-align: center;
position:static;
height:100%; /* this is the key! */
}#MainContainer {
height:100%;
border:1px solid #333;
width: 600px;
margin: 0 auto;
}#Header {
height: 50px;
border:1px solid #333;}
#thetext{
border:1px solid green;
}
#Footer {
width: 100%;
left: 0px;
bottom: 0px;
position: absolute;
}
#innerfooter{
width:600px;
border: 1px solid red;
background-color:#ddd;
margin:0 auto;
height: 50px;
}
</style>
</head><body>
<div id="MainContainer">
<div id="Header">
<p>Header</p>
</div>
<div id="thetext">
<p> the text</p>
</div>
</div>
<div id="Footer">
<div id="innerfooter"><p>Inner Footer</p> </div>
</div>
</body>
</html>
Firstly Darrin: i'm not actually using side bars so i wouldn't kno, maybe i'll implement them later when i become a bit more confident with the whole css thing!
Stratus: I did notice that the page wouldn't work properly in mozilla, however your solution seems to have worked.
Thank's,
Jon.
