Forum Moderators: not2easy
Here's the code:
*css*
body {
margin: 0;
padding: 0;
text-align: center;
}
#container {
margin: 0 auto;
width:800px;
text-align:left;
}
#leftside {
position:absolute;
left:0;
top:0;
width:50px;
height:600px;
z-index:1;
background-color: #33CC99;
}
#rightside {
position:absolute;
left:750px;
top:0;
width:50px;
height:600px;
z-index:2;
background-color: #33CC99;
}
#header {
position:absolute;
left:51px;
top:0;
width:698px;
height:75px;
z-index:3;
background-color: #99FFFF;
}
#footer {
position:absolute;
left:51px;
top:525px;
width:698px;
height:75px;
z-index:4;
background-color: #99FFFF;
}
#contentcontainer {
position:absolute;
left:51px;
top:76px;
width:698px;
height:448px;
z-index:5;
background-color: #CCFF66;
}
#navcontainer {
position:absolute;
left:0px;
top:0px;
width:698px;
height:30px;
z-index:1;
background-color: #FF9900;
}
*body*
<body>
<div id="container">
<div id="leftside"></div>
<div id="rightside"></div>
<div id="header"></div>
<div id="navcontainer">
</div>
<div id="footer"></div>
<div id="contentcontainer"></div>
</div>
</body>
and a warm welcome to these forums. ;)
The use of position:absolute is rarely needed for page layout purposes
and can often, as you have obviously discovered, cause problems. :(
Have a look at this reworked example...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css"><title></title>
<style type="text/css">
body {
margin:0;
padding:0;
text-align:center;
}
#container {
margin:0 auto;
width:800px;
}
#leftside {
width:50px;
height:628px;
background-color:#3c9;
float:left;
}
#center {
width:698px;
height:628px;
float:left;
}
#navcontainer {
height:30px;
background-color:#f90;
}
#header {
height:75px;
background-color:#9ff;
}
#contentcontainer {
height:448px;
background-color:#cf6;
}
#footer {
height:75px;
background-color:#9ff;
}
#rightside {
width:50px;
height:628px;
background-color:#3c9;
float:left;
}
</style></head>
<body><div id="container">
<div id="leftside"></div>
<div id="center">
<div id="navcontainer"></div>
<div id="header"></div>
<div id="contentcontainer"></div>
<div id="footer"></div>
</div><div id="rightside"></div>
</div>
</body>
</html>
I've not tried the OP's code but it seems to me all that is missing is that the container has not gained position. Simply adding position:relative; to the container should be enough IMHO.
To explain it a bit:
position:absolute elements are positioned relative to the viewport, unless there is a parent (not needed to be the direct parent) that has gained position itself. In that case the positioning is done in relation to that parent with position.
To gain position an element needs to have either position:relative or position:absolute . The position:relative is the easiest way to have an element gain position as, as long as you don't nudge it away with top/bottom/left or right settings, the only effect is that it gains position.
More info:
[w3.org...]
Contrary to what some might think, position:relative is not the default, position:static is. position:relative is mainly meant for nudging an element away from it's normal position while not adjustign the space allocated for it in the normal flow.
[edited by: swa66 at 11:33 am (utc) on Jan. 30, 2009]
*check birdbrains way of the float method above, which will allow you to center the page*
OR
*check out the postion method below*
Ok here it is:
css
body {
margin: 0;
padding: 0;
text-align: center;
}
#container {
position: relative;
margin: 0 auto;
width:800px;
text-align:left;
}
#leftside {
position: absolute;
left:0;
top:0;
width:50px;
height:600px;
background-color: #33CC99;
}
#rightside {
position:absolute;
left:750px;
top:0;
width:50px;
height:600px;background-color: #33CC99;
}
#header {
position:absolute;
left:51px;
top:0;
width:698px;
height:75px;background-color: #99FFFF;
}
#footer {
position:absolute;
left:51px;
top:525px;
width:698px;
height:75px;
background-color: #99FFFF;
}
#contentcontainer {
position:absolute;
left:51px;
top:76px;
width:698px;
height:448px;background-color: #CCFF66;
}
#navcontainer {
position:absolute;
left:0px;
top:45px;
width:698px;
height:30px;
background-color: #FF9900;
}
</style>
Body
<body>
<div id="container">
<div id="leftside"></div>
<div id="rightside"></div>
<div id="header">
<div id="navcontainer">
</div></div>
<div id="footer"></div>
<div id="contentcontainer"></div>
</div>
</body>
I really wanted to use positions for this, as I like being very exact in my layout, and it easier to create in dreamweaver. The only downfall I can say to this is that it takes alot more coding then the way "birdbrain" used the floating method.
The float method seems great, but it took me a while to realize that you have to stack everything in the <body> tag from left (top) to right (bottom) of the tag, assuming everything is floating to the left. Float method seems to take a lil more thinking.
Oh yeah and this link helped explain the elements of css alot! It also explains the issues of internet explorer, and how it reads the code.
<snip>
Thanks again, I learned so much from this these 2 posts LOL.
[edited by: swa66 at 11:31 am (utc) on Jan. 30, 2009]
[edit reason] Link, please see forum charter [/edit]
No problem, you're welcome. ;)
