Как заставить мой нижний колонтитул придерживаться нижней части страницы?

Я играл с моим контентом, чтобы достичь желаемого эффекта, однако теперь мой нижний колонтитул не будет внизу страницы под всем содержимым. В настоящее время он фиксируется в нижней части страницы, однако это перекрывает навигационную панель, идущую по левой стороне. У меня есть основная часть содержимого внутри div-main container, с нижним колонтитулом вне этого.

HTML для моего нижнего колонтитула:

 <div class="footer">
     <div class="footerContent">
            <p>Copyright &copy; 2014 <a href="#" title="DanielParry">www.danielparry8.com</a></p>
    </div>     
  </div>

CSS для нижнего колонтитула:

.footer {
width: 100%;
z-index:999;
bottom:0;
clear:both;
position:fixed;

 }

  .footerContent {

font-family: sans-serif;
color: #FFF;
float:left;
width:100%;
margin-top: 10px;
margin-bottom: 10px;
 }

  .footer p {
float:left; width:100%; text-align:center;
 }

Я понимаю, что фиксированное позиционирование, вероятно, не метод, но при использовании других методов он поднимается к верхней части страницы и по-прежнему перекрывает мой контент.

Весь контент находится внутри основного содержимого div со следующим CSS

 html, body, #maincontainer { height: 100%; }
 body > maincontainer { height: auto; min-height: 100%; }

Это было на нервы в течение нескольких дней, и никакие другие решения, которые я просматривал здесь, не работали, я полагаю, что их ошибка в моем коде где-то я просто не могу найти!

Благодарю!