footer doesnt appear where it should

I am trying to place a couple of images in the footer. However, it appears below my navigation bar on the left. I am using clear:both but it still makes no difference. Can someone tell me a solution so it will appear as a footer no matter how long the content is and appears on the right hand side in FF and IE.

/* CSS Document */
#header{
width:800px;
text-align:center;
}

#header h1 a{
display:block;
height: 122px;
font-size: 0;
text-align:left;
float:left;
width: 122px;
}

#header h1 b{
margin:30px;
display:block;
height:67px;
font-size:0;
text-align:center;
float:left;
width:434px;
}

#header h1 c{
display:block;
height:122px;
font-size:0;
text-align:right;
float:left;
width:122px;
}

#navsite
{
display:block;
text-align:center;
float:left;
width:150px;
clear:both;
}

#container {
position:relative;
padding: 0px 170px 0px 115px;
margin: 0px;
}

#content
{
position:absolute;
margin: 0px 190px 20px 190px;
left: 61px;
top: 162px;
width: 587px;
height: 341px;
}

#footer{
clear:both;
padding:20px;
background:#eee;
}
html, body {
height: 100%;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Page Title</title>
<style type="text/css" media="screen">/* style */</style>
</head>
<body BGCOLOR=#F3ECE3 text="#000000" link="#793C3C" vlink="#9C5656" alink="#B57373">
<div id="container">
<div id='header'>
<h1>
<a><img src="image.gif" alt="#"></a>
<b><img src="image.gif" alt="#"></b>
<c><img src="image.gif"></c>
</h1>
</div>
<div id="navsite">
<div align="left"> <a class="skipnav" href="#content">[skip navigation]</a><br>

<p><a href="#" target="_self">Link</a><br>
<a href="#" target="_self">Link</a><br>
<a href="#" target="_self">Link<br></a>
<a href="#" target="_self">Link<br></a>
<a href="#" target="_self">Link<br></a>
<a href="#" target="_self">Link<br></a>
<a href="#" target="_self">Link</a></p>
<p><a href="#" target="_blank">Home</a><br>
<a href="#" target="_blank">Departments</a></p>
</div>
</div>

</div>
<div id="footer">
<img src="image.gif" width="125" height="57" usemap="map.htm#iconNav" border="0" alt="#">
<map name="iconNav">..map..
</div>
</map>
</body>
</html>

[edited by: SuzyUK at 5:13 am (utc) on Mar. 15, 2005]
[edit reason] HTML summarised [/edit]

footer doesnt appear where it should

the footer i have is not appearing where it should

khan538

SuzyUK

gulliver

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week