I'm trying to make a page that is 80% total width and is centred. I've used a div as a container and then I have my header and content and footer divs inside. This is the code that I thought would work, but it doesn't.
- Code: Select all
CSS Stylesheet
#container {
position:absolute;
left:10%;
top:0;
width:80%
}
#header {
position:absolute;
left:0;
top:0;
Height:10%;
width:100%;
}
#main {
position:absolute;
left:0;
top:10%;
width:100%;
}
#footer {
position:absolute;
left:0;
bottom:0;
Height:10%;
width:100%;
}
HTML
<div id="container">
<div id="header">header text here...</div>
<div id="main">main content here...</div>
<div id="footer">footer text here...</div>
</div>
This code doesn't bind the width of the divs inside the container to the container width. They overlap to the right edge of the screen. The left edge is fine. They start at 10% from the edge of screen, which is what I want.
What am I doing wrong?