0
I am trying to code a website for myself and my friend's design site, but our footer isn't working properly. It is supposed to go down the page as the content does. instead, as you add more content, the footer stays in the same spot and the content goes through it. What am i doing wrong? Here is a link to the site, and the code is below.
http://www.knightprod.net/design/
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Untitled Document</title> <link rel="stylesheet" href="css.css" type="text/css" /> </head> <body> <div class="container"> <div id="header"></div> <div id="header_under"></div> <div class="spacer"></div> <div id="content"> <div id="side"> <div class="leftnav"> <ul class="sidemenu"> <li><a href="home.html">Home</a></li> <li><a href="gallery.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> <div class="leftbottom"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam blandit tincidunt lorem. Mauris nec enim. Praesent urna nisl, suscipit eu, bibendum ac, vestibulum eu, enim. Mauris nec lectus nec neque fringilla dapibus. Nulla dui diam, nonummy id, consequat sed, lobortis vel, justo. Praesent non elit quis nunc feugiat iaculis. Cras pulvinar. Ut fringilla mauris eu massa. Nullam nec arcu nec justo placerat congue. Ut lobortis vehicula metus. Suspendisse faucibus bibendum nulla. Pellentesque pharetra condimentum ante. Vivamus mattis elit non erat. -john doe www.JJdesigns.com</div> </div> <div id="main"> <div class="adsence"></div> <div class="main"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed euismod. Curabitur sodales felis id nisi. Suspendisse scelerisque gravida massa. Fusce erat. Aenean eget turpis. Aliquam erat volutpat. Sed sagittis. Donec cursus porta neque. Donec eu arcu. Nullam laoreet. Phasellus sollicitudin aliquet elit. Pellentesque vulputate, ante eget molestie posuere, metus lectus bibendum ligula, eget tempus magna est vel elit. Donec bibendum hendrerit arcu. Quisque ornare placerat massa. Nam rhoncus leo non sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam vitae risus. Nam semper massa non ante imperdiet tincidunt. Maecenas in eros. Ut vel orci. Nam odio. Morbi non diam. Nulla tincidunt eros. Maecenas pretium. Aenean risus leo, fringilla ultricies, dignissim non, luctus ac, lorem. Donec turpis enim, gravida eu, molestie vel, dignissim at, nibh. Cras risus. Pellentesque vitae dui sed nisi tristique varius. Maecenas placerat, risus id rutrum vehicula, sapien quam viverra massa, sed gravida erat felis quis eros. Integer quis felis sed nisi adipiscing ultricies. Nam porttitor nisi cursus orci. Quisque a nibh in erat facilisis aliquam. Maecenas ornare risus vitae nisl. Duis nunc. Pellentesque varius turpis ut urna. Phasellus eget nunc. Phasellus interdum facilisis eros. Donec porttitor. Nulla purus leo, egestas ut, laoreet ac, aliquam in, metus. Praesent eleifend elit. Cras sed lorem. Morbi scelerisque mauris a nisl. Curabitur vulputate odio sed neque. Nam id ante eu ipsum ornare imperdiet. Phasellus feugiat, lorem a aliquam tincidunt, justo lectus placerat odio, sed euismod mi urna at turpis. Vestibulum magna. Suspendisse nunc justo, ultrices adipiscing, mollis elementum, suscipit non, neque. Vestibulum sed libero. Nulla nisi turpis, viverra sed, euismod vitae, cursus non, leo. Suspendisse potenti. Sed in risus eget quam sodales cursus. Etiam luctus. In nisl elit, consectetuer ac, molestie eget, nonummy volutpat, purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus dui leo, placerat dictum, pulvinar id, aliquet vel, libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Morbi feugiat. Curabitur urna orci, volutpat eu, hendrerit quis, accumsan nec, dolor. Aenean lorem. Morbi lacus nisl, dapibus eget, mattis malesuada, porttitor ut, eros. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vestibulum vel pede. Cras fringilla nulla a sem. Proin interdum justo sit amet ligula. Maecenas sed tellus quis ligula auctor rhoncus. Vivamus at erat. Sed aliquet adipiscing urna. Suspendisse eu nibh. </p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed euismod. Curabitur sodales felis id nisi. Suspendisse scelerisque gravida massa. Fusce erat. Aenean eget turpis. Aliquam erat volutpat. Sed sagittis. Donec cursus porta neque. Donec eu arcu. Nullam laoreet. Phasellus sollicitudin aliquet elit. Pellentesque vulputate, ante eget molestie posuere, metus lectus bibendum ligula, eget tempus magna est vel elit. Donec bibendum hendrerit arcu. Quisque ornare placerat massa. Nam rhoncus leo non sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam vitae risus. Nam semper massa non ante imperdiet tincidunt. Maecenas in eros. Ut vel orci. Nam odio. Morbi non diam. Nulla tincidunt eros. Maecenas pretium. Aenean risus leo, fringilla ultricies, dignissim non, luctus ac, lorem. Donec turpis enim, gravida eu, molestie vel, dignissim at, nibh. Cras risus. Pellentesque vitae dui sed nisi tristique varius. Maecenas placerat, risus id rutrum vehicula, sapien quam viverra massa, sed gravida erat felis quis eros. Integer quis felis sed nisi adipiscing ultricies. Nam porttitor nisi cursus orci. Quisque a nibh in erat facilisis aliquam. Maecenas ornare risus vitae nisl. Duis nunc. Pellentesque varius turpis ut urna. Phasellus eget nunc. Phasellus interdum facilisis eros. Donec porttitor. Nulla purus leo, egestas ut, laoreet ac, aliquam in, metus. Praesent eleifend elit. Cras sed lorem. Morbi scelerisque mauris a nisl. Curabitur vulputate odio sed neque. Nam id ante eu ipsum ornare imperdiet. Phasellus feugiat, lorem a aliquam tincidunt, justo lectus placerat odio, sed euismod mi urna at turpis. Vestibulum magna. Suspendisse nunc justo, ultrices adipiscing, mollis elementum, suscipit non, neque. Vestibulum sed libero. Nulla nisi turpis, viverra sed, euismod vitae, cursus non, leo. Suspendisse potenti. Sed in risus eget quam sodales cursus. Etiam luctus. In nisl elit, consectetuer ac, molestie eget, nonummy volutpat, purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus dui leo, placerat dictum, pulvinar id, aliquet vel, libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Morbi feugiat. Curabitur urna orci, volutpat eu, hendrerit quis, accumsan nec, dolor. Aenean lorem. Morbi lacus nisl, dapibus eget, mattis malesuada, porttitor ut, eros. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vestibulum vel pede. Cras fringilla nulla a sem. Proin interdum justo sit amet ligula. Maecenas sed tellus quis ligula auctor rhoncus. Vivamus at erat. Sed aliquet adipiscing urna. Suspendisse eu nibh. </p> </div> </div> </div> <div id="footer"> <div class="footer">Home | Portfolio | About Us | Contact Us | Get a Quote | Partners | Licenses<br /> <div class="footer2">Copyright © 2006 JJDesign & Media. All Rights Reserved.</div></div></div> </div> </body> </html>
CSS:
body{
text-align: center;
background-color:#2E2E2E;
}
.container {
width: 680px;
padding:0px;
margin: 0px;
margin-left: auto;
margin-right: auto;
}
/* - Divs - */
#header {
background-color: #383838;
height: 139px;
width: 680px;
}
#header_under {
background-color: #FF00FF;
height: 5px;
width: 680px;
}
#side {
height: 100%;
width: 205px;
float: left;
}
#Main {
height: 100%;
width: 471px;
float: right;
margin-top:5px;
}
#content {
position: relative;
width: 680px;
margin-top: 5px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
}
#footer {
height:50px;
width:inherit;
position:inherit;
}
/* - Styles - */
.footer {
position:relative;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
font-style:bold;
text-align:center;
font-weight:bold;
margin-top:100%;
color:#CFCFCF;
background-color:#373837;
padding:5px 5px 5px 5px;
height:50%;
}
.footer2 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
font-style:bold;
font-weight:bold;
text-align:center;
color:#464646;
}
.leftnav {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.leftbottom {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
background-color: #666666;
float: left;
height: 100%;
width: 195px;
margin-top:5px;
padding:5px 5px 5px 5px;
}
.main {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #333333;
background-color: #CCCCCC;
float: right;
height: 100%;
width: 461px;
margin-top:5px;
padding:5px 5px 5px 5px;
}
.spacer {
height: 5px;
background-color:#2E2E2E;
}
.adsence {
background-color: #DEF3FF;
float: right;
height: 95px;
width: 471px;
margin: 0px;
}
/* - Rollover Nav Stuff - */
ul.sidemenu {
padding: 0;
margin: 0;
list-style: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
border-bottom: 1px solid #6F3E04;
width: 205px;
background-color: #eaeaea;
}
ul.sidemenu li {
border-top: 4px solid #FAFAFA;
border-left: 0px solid #eaeaea;
border-right: 0px solid #eaeaea;
border-bottom: 4px solid #FAFAFA;
}
ul.sidemenu li a {
text-decoration: none;
display: block;
width: 200px;
color: #b7b7b7;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: left;
padding-left:5px;
}
ul.sidemenu li a:hover {
background-color: #DEF3FF;
color: #333333;
margin-left:0;
}
ul.sidemenu a:hover {
background-color: #DEF3FF;
color: #333333;
}
/* - Extra styles - */
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #CCCCCC;
clip: rect(5px,auto,auto,auto);
}
.style2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #333333;
}
Thanks!
