html - How do I make my footer stick to the bottom of the page? -
i have been playing around content in order achieve desired effect footer not @ bottom of page below content. fixed @ bottom of page, overlaps navigation bar running down left hand side. have main body of content inside div - main container, footer outside of this.
html footer:
<div class="footer"> <div class="footercontent"> <p>copyright © 2014 <a href="#" title="danielparry">www.danielparry8.com</a></p> </div> </div>
css 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 fixed positioning not method use, when use other methods rises towards top of page, , still overlaps content.
all content inside main content div following css
html, body, #maincontainer { height: 100%; } body > maincontainer { height: auto; min-height: 100%; }
this has been getting on nerves days , no other solutions have browsed on here have worked, presume error in code somewhere can't find it!
thanks!
you need change position: fixed absolute end add bottom: 0; footer , unit must located outside of wrapper
Comments
Post a Comment