Hi,
I'm trying to make a page which is 600px wide and all centered using divs, which is fine. The problem is arising when I try to make the header div fixed so that the body scrolls underneath it. Below I have a simplified version of the strucutre I have to help make things a little clearer.
If you remove the position:fixed; and position:absolute from the #header and #body declarations then you'll have the shape of the page which I'm trying to achieve.PHP Code:<html>
<head>
<style type="text/css">
body {
margin:0;
padding:0;
text-align:center;
}
#container {
border:1px solid red;
margin:auto;
text-align:left;
padding:5px;
width:600px;
background-color:blue;
}
#header { position:fixed; top:0; width:100%; height:100px; border:1px solid red; background-color:green;}
#body { position:absolute; top:100px; width:100%; border: 1px solid red; background-color:purple;}
/* #header { position:fixed; top:0; left:0; right:0; height:100px; background-color:green; }
#body { position:absolute; top: 100px; width:100%; background-color:blue; }*/
</style>
</head>
<body>
<div id="container">
<div id="header">
Here is the header
</div>
<div id="body">
Here is the body<br />Here is the body<br />Here is the body<br />Here is the body<br />Here is the body<br />
Here is the body<br />Here is the body<br />Here is the body<br />Here is the body<br />Here is the body<br />
Here is the body<br />Here is the body<br />Here is the body<br />Here is the body<br />Here is the body<br />
Here is the body<br />Here is the body<br />Here is the body<br />Here is the body<br />Here is the body<br />
Here is the body<br />Here is the body<br />Here is the body<br />Here is the body<br />Here is the body<br />
Here is the body<br />Here is the body<br />Here is the body<br />Here is the body<br />Here is the body<br />
</div>
</div>
</body>
</html>
Thanks in advance for any help
Bubble
Bookmarks