I've encountered an issue where the footer div is appearing behind the right-hand side div. I have a central container div with two floated divs next to each other, and the footer is separate. I've spent hours trying to fix it but can't figure out what's wrong.
Here's a jsFiddle example illustrating the problem: http://jsfiddle.net/VU3xW/
HTML:
<div id="middlecontainer">
<div id="leftContent"></div>
<div id="rightContent"></div>
</div>
<div id="footer">
<p class="footernav"><a href="">Home</a> | <a href="">About</a> | <a href="">Products</a> | <a href="">Contact</a></p>
<p class="copyright">Copyright © 2013 JBA Packaging Supplies | Designed by iDesign</p>
</div>CSS:
#rightContent{
width: 690px;
height: 400px;
float: right;
background-color:#222;
border-radius: 10px;}
#leftContent{
display: inline-block;
width: 240px;
height: 200px;
background-color:#555;
border-radius: 10px;}
#middlecontainer {
width: 960px;
background-color:#003;}
#footer {
width: 960px;
background-color: #121212;
text-align: center;
border-radius: 10px;}
#footer a{
text-decoration: none;
color:#888;
}
#footer a:hover{
text-decoration: none;
color:#444;
}
.footernav {
font-family:Arial, Helvetica, sans-serif;
font-size: .8em;
color:#444;
padding-top: 10px;
}
.copyright {
font-family:Arial, Helvetica, sans-serif;
font-size: .8em;
color:#888;
padding-top: 10px;
}