why is my footer at the top!!!!!!
Hi everyone, this is my first post and i really hope you can help!
My footer sits at the top of the page and i cant get it to go to the bottom below my other divs.
Could anyone please help. Any advice would be happily received as it is my first attempt (as you can guess)
divnavlist is the left index and divmain is the main info. I want the footer to sit under both of these.
Here is my CSS and a example page.
body { background-color: #FFFFFF; margin: 0px; padding: 0px; }
div, p, address {font-family: Verdana, Arial, Helvetica, sans-serif; }
#divlogo { position: absolute; left: 0px; top: 0px; width: 770px; }
#divindex { position: absolute; text-align: justify; left: 0px; width: 770px; top: 70px; background-color: #003399; font-size: 12px; }
#divnavlist { position: absolute; left: 0px; top: 131px; width: 150px; font-size: 14px; text-align: center; border-bottom: 3px solid #FFFFFF; background-color: #6699FF; }
#divmain { position: absolute; left: 152px; top: 106px; width: 610px; border-left: 1px solid #003399; padding: 10px 10px 30px; }
#divmain p { font-size: 12px; margin: 18px 8px 10px; padding-right: 15px; line-height: 1.5; text-align: justify; }
#divmain h1 { color: #003399; margin: 20px 8px 3px; font-size: 24px; border-bottom: 1px dashed #FEC164; padding-bottom: 10px; }
#divmain h2 { margin-top: 22px; margin-left: 10px; margin-right:12px; font-size: 16px; padding-bottom: 9px; color:#003399 }
#divmain a { color: #6600CC; text-decoration: none; padding: 0px 3px; }
#divmain a:hover, #divmain a:active { text-decoration: underline; }
#divfooter { left: 0px; width: 100%; color: #FFFFFF; background-color: #003399; clear: both; padding-top: 12px; padding-bottom: 12px; font-size: 10px; text-align: center; }
#divfooter a { color: #FFFFFF; }
#divfooter a:hover { color: #FFFF00; background-image: none; }
#divfooter a:active { color: #FFFF00; background-image: none; }
p.navbutts { font-size: 12px; }
.navbutts a {
font-weight: bold;
text-decoration: none;
color: #FFFFFF;
margin-top: 50px;
background-color: #6699FF;
padding: 0px 4px 0px;
border-top: 0px solid #D0D1CD;
border-right: 0px solid #585B53
border-bottom: 0px solid #585B53
border-left: 0px solid #D0D1CD;
}
.navbutts a:hover { color: #330066; background-image: none; }
.navbutts a:active { color: #0099FF; background-image: none; }
p.navbutts1 { font-size: 12px; }
.navbutts1 a {
font-weight: bold;
text-decoration: none;
color: #FF0000;
background-color: #6699FF;
padding: 0px 4px 0px ;
border-top: 0px solid #D0DCD;
border-right: 0px solid #585B53
border-bottom: 0px solid #585B53
border-left: 0px solid #D0D1CD;
}
.navbutts1 a:hover { color: #330066; background-image: none; }
.navbutts a:active { color: #330066; background-image: none; }
p.navbutts1 { font-size: 12px; }
#divbox { margin-top: 60px; padding: 0px 0px 10px 0px; margin-left: 5px; width: 140px; background-color: #6699FF; }
#divbox p { color: #003399; font-size: 10px; margin: 12px 0px 0px; }
#divbox h2 { color: #666666; font-size: 16px; margin: 16px 0px 0px; }
#table { margin-left: 25px; margin-right: 10px; }
td { width: 124px; text-align: center; padding: 1px; margin-left: 7px; margin-right: 7px;}
td a { color:#FFFFFF; font-size: 11px; text-decoration: none; }
And the page:
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Bordesley Institute - Transformative Learning</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css/bordesleycssc4.css" rel="stylesheet" type="text/css">
<link href="css/printcss.css" rel="stylesheet" type="text/css" media="print"/>
</head>
<body>
<div id="divlogo">
<p><img src="Images/transformativebanner.png">
</div>
<div id="divindex">
<table>
<td><a href="..\index.htm">Bordesley<br>Home</a></td>
<td><a href="managementdevelopment.htm">Management<br>Development</a></td>
<td><a href="healthandsocialcare.htm">Health &<br>Social Care</a></td>
<td><a href="researchandconsultancy.htm">Research &<br>Consultancy</a></td>
<td><a href="transformativelearning.htm">Transformative<br>Learning</a></td>
<td><a href="onlinelearning.htm">Online<br>Learning</a></td>
</table>
</div>
<div id="divmain">
<h1>Transformative Learning</h1>
<p>The finding are offering huge potential for increasing individual and organisational performance. We enable you to discover the impact and relevance of these by providing/p>
</div>
<div id="divnavlist">
<p class="navbutts"><a href="transformativelearning.htm" tabindex="1">Transformative Learning</a></p>
<div id="divbox">
<p class="navbutts1"><a href="contactus.htm" tabindex="1">Contact Us</a></p>
</div>
</div>
<div id="divfooter">
<address> Why is this footer at the top!</address>
</div>
</body>
</html>
Bookmarks