I am having an issue with my footer, I am sure I'm missing something that should be painfully obvious but I've been playing with it for too long and am making no progress.
My issue is that the content section goes underneath my footer instead of pushing it down.
And here are the two objects that are overlapping.
#footer {
margin: -40px auto 0;
z-index: 9999;
border-bottom: none;
width: 75em;
height: 3.333em;
border: .0833em solid #DEDEDE;
-moz-border-radius-topleft:26px;
-moz-border-radius-topright:26px;
-webkit-border-top-left-radius:26px;
-webkit-border-top-right-radius:26px;
-moz-box-shadow:0px 0px 20px #000000;
-webkit-box-shadow:0px 0px 20px #000000;
box-shadow:0px 0px 20px #000000;
}
#middle {
width:75em;
z-index: -1;
margin:0em auto;
padding: 15px 0 1.667em 0;
height: 95%;
position: relative;
background-color: rgba(255, 255, 255, .30);
-moz-border-radius:26px;
-webkit-border-radius:26px;
border-radius:26px;
-moz-box-shadow:0px 0px 20px #000000;
-webkit-box-shadow:0px 0px 20px #000000;
box-shadow:0px 0px 20px #000000;
}
If I understand what you're trying to do properly, you are trying to keep the footer from overlapping the "middle" element.
Take a look at:
margin: -40px auto 0;
If you change this to
margin: 40px auto 0;
Removing the minus sign moves your footer south. You can adjust the exact length, but I believe this was the primary issue, and it tested to work to move the footer down.