0

I have been playing around with my content in order to achieve my desired effect however now my footer will not be at the bottom of the page below all content. I it is currently fixed at the bottom of the page, however this overlaps a navigation bar running down the left hand side. I have the main body of the content inside a div - main container, with the footer outside of this.

HTML for my footer:

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

CSS for footer:

.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;
 }

I understand that fixed positioning is probably not the method to use, however when I use other methods it rises towards the top of the page, and still overlaps my content.

All content is inside a main content div with the following CSS

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

This has been getting on my nerves for days and no other solutions I have browsed on here have worked, I presume their is an error in my code somewhere I just can't find it!

Thanks!

TylerH
  • 20,799
  • 66
  • 75
  • 101
danielparry8
  • 27
  • 2
  • 6
  • 1
    Check out [CSS Sticky Footer](http://www.cssstickyfooter.com/). Also, to place the same footer across many pages, you can use PHP includes, but I don't think that's what this question is actually about. – TylerH Apr 09 '14 at 14:24
  • possible duplicate of [Make footer stick to bottom of page correctly](http://stackoverflow.com/questions/3443606/make-footer-stick-to-bottom-of-page-correctly) – Paulie_D Apr 09 '14 at 14:33

2 Answers2

1

you need to change position: fixed to absolute end add bottom: 0; footer and your unit must be located outside of the wrapper

AlexPrinceton
  • 1,173
  • 9
  • 12
  • I have added: position:absolute end; bottom: 0; however it is now behind some content about a third down the page? – danielparry8 Apr 09 '14 at 14:35
  • depending on how you put it in the html, you might also want to add a z index so that it is above all the other content. – nycynik Apr 09 '14 at 14:38
  • another option but to remove the position to set the height and footer example 210px then prove in margin-top:-210px – AlexPrinceton Apr 09 '14 at 14:39
0

I used a margin-bottom: <footerheight> on the body css. Might be a bit 'cheaty' but seems to work on everything I tried.

EagleV_Attnam
  • 737
  • 6
  • 11