Hi there.
This is the quick way to fix the footer problem, not sure if its 100% the correct way.
Sorry, I cant go through all the code, perhaps this evening, as I am very busy at the moment, hope this helps in some way?
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Saint Demiana Coptic Orthodox Church in San Diego, California</title>
<link href="css/sd.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
margin:0px auto 0px auto;
background-image:url(../media/images/bg/bg.jpg);
background-repeat:repeat;
background-attachment: fixed;
}
p {
margin: .625em 0 1.5em;
line-height: 14px;
text-
}
#container {
width: 770px;
padding: 10px;
margin: 0 auto;
background-image:url(../media/images/bg/contentbg.gif);
background-repeat:repeat-y;
}
#mainnav {
text-align:right;
padding-top:1px;
padding-right: 10px;
padding-bottom:10px;
}
#navlist li {
display: inline;
list-style-type: none;
padding-right: 10px;
padding-top:10px;
}
ul#navlist a:link, ul#navlist a:visited{
text-decoration:underline;
color: #990000;
}
ul#navlist a:hover, ul#navlist a:active{
text-decoration: none;
color: #74150a;
}
.header {
background-image:url(../media/header/header.jpg);
background-repeat:no-repeat;
background-position:center;
height:125px;
width: 740px;
padding:5px;
}
#websitenews {
background-image:url(../media/header/websitenews.jpg);
background-repeat:no-repeat;
float:right;
height:50px;
width:500px;
padding-right:20px;
margin-top:10px;
padding-left:20px;
padding-bottom:1px;
}
#content {
width:500px;
padding-right:20px;
padding-left:20px;
line-height:1px;
clear: right;
float: left;
margin: 15px 0 0;
overflow: hidden;
}
#clear {
clear:both;
}
#sidenav {
margin-left:10px;
margin-top:10px;
width:200px;
height:500px;
background-color:#f1f1f1;
float: left;
border: 1px dotted black;
clear: left;
}
#footer {
font-size: 10px;
height: 50px;
padding-right:10px;
padding-left:10px;
margin: 10px auto 10px auto;
border-top:1px solid black;
vertical-align: bottom;
width: 720px;
color: #333300;
text-align: center;
line-height: 25px;
background: #e4e4d8;
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="mainnav">
<ul id="navlist">
<li><a href="#">articles</a></li>
<li><a href="#">church schedule</a></li>
<li><a href="#">forums</a></li>
<li><a href="#">our priest</a></li>
<li><a href="#">presentations</a></li>
<li><a href="#">contact us</a></li>
</ul>
</div>
<div class="header">header</div>
<div id="clear"></div>
<div id="websitenews">website news</div>
<div id="sidenav">
side nav
</div>
<div id="content">
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
I moved your <div id="sidenav"> above content, and float them both left, that seems to put the footer in the correct place.
Cheers
Ox
Posting Permissions
Bookmarks