Menu
Hiya,
I’ve created a simple template with div’s and css. It validates fine.
My problem is that the footer overlaps the other div’s.
How can I get my footer to stay at the bottom and not overlap everything?
Please help
Wayne
The Code (Sorry I don’t have any direct links yet)
<html>
<head>
<title>test template</title>
<link href=”css/style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div class=”container”>
<div class=”header”>
header
</div>
<div class=”nav”>
nav
</div>
<div class=”contents”>
contents
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div class=”footer”>
footer
</div>
</div>
</body>
</html>
/* CSS Document
body {
margin:0 auto;
text-align:center;
}
.container {
margin:0 auto;
width:660px;
text-align:left;
}
.header {
height:100px;
width:650px;
position:absolute; top:0px;
border:1px;
border-style:solid;
border-color:#000000;
}
.nav {
height:300px;
width:150px;
position:absolute; top:110px;
border:1px;
border-style:solid;
border-color:#000000;
}
.contents {
margin-left:160px;
height:auto;
width:490px;
position:absolute; top:110px;
border:1px;
border-style:solid;
border-color:#000000;
}
.footer {
height:50px;
width:650px;
position:absolute; bottom:0px;
border:1px;
border-style:solid;
border-color:#000000;
}