Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Jul 2011
    Posts
    118
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Positioning Footer always at base

    Hi all, got a bit of an issue with getting my footer to stick to the base of the page.

    I have a Fixed Position header at the top of the page remaining visible at all times but then want the wrapper and main conent divs to expand with their contents and a 100%width footer at the base of that.

    This is where I currently am:

    Style:

    Code:
    body{
        height:100%;
        margin:0px 0px 0px 0px;
        }
    
    #headerdiv{
      position:fixed;
      top:0px;
      left:0px;
      width:100%;
      height:125px;
      z-index:20000000;
    }
    
    #headerholder{
        position:fixed;
        width:100%;
        height:125px;
        z-index:30000000;
        text-align:center;    
        }
        
    
    
    #wrapper{
       position:absolute;
       margin-top:125px;
       width:100%;
    height:100%
       text-align:center;
       min-height:100%;
     }
    
    #maincontent{
        position:relative;
        margin:0 auto;
        clear:both;
        width:870px;
        text-align:left;
    min-height:100%;
        height:auto !important;
        height:100%;
     }
    
       #footerbar{
        position:relative;
       margin-top:-160px;
        width:100%;
        margin-top:-160px;
        height:160px;
    }
    Body:
    Code:
    <div id="headerdiv"> <!-- This is a semi-transparent background for the header -->
     &nbsp;
     </div>
     <div id="headerholder"><!-- This contains the headers contents -->
     HEADER CONTENT
    </div>
     <div id="wrapper">
    
     <div id="maincontent">
    PAGE CONTENT HERE
    </div>
    <div id="footerbar">
    <div id="footercontent">
    FOOTER CONTENT HERE
    </div>
    </div></div>
    I just can't get this to work though. Could anyone point out where I may be going wrong? Thanks YD
    Last edited by YourDirector; 04-10-2012 at 01:11 PM.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    It's called sticky footer, google it.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •