My footer div is not sticking to the bottom of the page as I intended. Instead of remaining fixed at the bottom, it seems to be floating on top of the main content. Additionally, my divs are not lining up properly and appear to have padding on the top and bottom. Have I overlooked something in my markup?
Below is my HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>The Frag Factory</title>
<div class="header">
<div class="logo">
<img src="includes/images/tffLogo.jpg"/>
</div>
<div class="nextLan">
The Next LAN is on April 21-24th in
</br><span>00d.00h.00m.00s</span>
</div>
</div>
</head>
<body
<div class="navContainer">
<ul>
<li><a href="#">Events</a> |</li>
<li><a href="#">Contact Us</a> |</li>
<li><a href="#">Next Lan</a> |</li>
<li><a href="#">Sponsers</a> |</li>
<li><a href="#">Servers</a> |</li>
<li><a href="#">Community</a></li>
</ul>
</div>
<div class="container">
<div class="sliderContainer">
<img src="includes/images/sliderImage1.jpg"/>
</div>
<vertical around themdiv class="mainContainer">
<h1>MAIN CONTENT</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor, turpis faucibus ultrices mollis, nisl lectus fermentum orci, pulvinar vehicula neque metus vel leo. Praesent semper ullamcorper dolor, quis scelerisque neque venenatis quis. Vestibulum lacinia ut dolor ac fermentum. Pellentesque ornare facilisis ultrices. Donec vel purus eleifend, euismod metus in, faucibus sem. Nullam nulla odio, tristique sed velit vitae, pretium feugiat nibh. Sed a odio leo. Nullam eget enim pulvinar magna volutpat scelerisque eget nec est. Quisque sagittis tincidunt orci. Suspendisse ac erat ut turpis luctus euismod et eget dolor. Duis cursus, erat sed condimentum venenatis, purus urna sodales augue, vitae viverra purus augue sed tortor. Nullam adipiscing dapibus ultricies. In hac habitasse platea dictumst.</p>
</div>
<div class="sideBar">
<center><img src="http://www.placehold.it/150x150"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor, turpis faucibus ultrices mollis, nisl lectus fermentum orci, pulvinar vehicula neque metus vel leo. </p>
</div>
</div>
<footer>
<div id="footerContainer">
THIS IS A FOOTER
</div>
</footer>
</body>
</html>
Here is my CSS:
body{
font-family: helvetica;
letter-spacing: 0.09px;
color: #717171;
background-image: url("includes/images/dark_mosaic.png");
display:block;
}
h1{}
h2{}
h3{}
p{}
.clear{
clear:both;
}
/*HEADER*/
.header{
width:900px;
margin:0 auto;
height:75px;
background-color: #000;
}
.logo{
float:left;
}
.logo img{
height:70px;
width:auto;
}
.nextLan{
float:right;
color:#36B627;
text-align: center;
padding-right:20px;
padding-top: 6px;
}
.nextLan span{
font-size: 40px;
font-weight: bolder;
vertical-align: center;
}
/*NAVIGATION*/
.navContainer{
background-color: #535353;
width:900px;
height:25px;
margin:0 auto;
line-height: 25px;
text-align:center;
position: relative;
top:-9px;
}
.navContainer li{
display:inline;
}
/*SLIDER*/
.sliderContainer{
width:900px;
margin:0 auto;
}
.sliderContainer img{
width:900px;
height:auto;
}
/*MAINCONTENT*/
.container{
width:900px;
margin:0 auto;
position: relative;
}
.mainContainer{
width:680px;
background-color: #000;
float:left;
padding:10px;
}
.sideBar{
width:170px;
background-color: #D66767;
float:left;
padding:10px;
margin-left: 10px;
}
/*FOOTER*/
#footerContainer{
position:absolute;
height: 180px;
clear:both;
background-color: #fff;
width:100%;
padding:0;
margin:0;
left:0;
}