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 6 of 6

Thread: footer issue

  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    footer issue

    Hi,

    I am back with another issue, hoping to get this one solved as quickly as previous...

    Trying to get my footer div to sit at the bottom of the page, or more precisely sit immediately after the end of the main content div?

    The footer will be fixed depth.
    The main/main_content divs will have fluid depth.

    http://www.synaxissolutions.co.uk/test/fin/test.html

    Many thanks in advance

  • #2
    New to the CF scene
    Join Date
    Sep 2011
    Location
    OKC, OK
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The height of main_content is hard set at 330px. Change it to min-height.

  • #3
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,928
    Thanks
    46
    Thanked 203 Times in 202 Posts
    if you are trying to make a "sticky footer" which it sounds like you are... put the footer outside the content wrapper and give the wrapper a negative margin-bottom the size of the footer (one way to do it)
    example
    Code:
    <div id="wrapper">
      <div id="header"></div>
      <div id="sidepane"></div>
      <div id="main"></div>
    </div>
    <div id="footer"></div>
    
    ......
    #footer
    {
    .....
    height:100px;
    ......
    }
    #wrapper
    {
    .....
    margin-bottom:-100px;
    .....
    }

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #4
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks but I think there is something else missing as the footer has remained in the same place

  • #5
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,928
    Thanks
    46
    Thanked 203 Times in 202 Posts
    I do not see why it is not working... it should... in your style you omit type="text/css" idk if that is causing issue or not (not likely bc it is showing up on chrome inspect element... anyways it should have worked unless my brain is fried and i am missing something blatant... regardless you can do a different sticky footer... get rid of the margin crap I had you put in... then add this to your footer
    Code:
    position:fixed;
    bottom:0;

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #6
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks I think that has fixed 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
    •