#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    6
    Rep Power
    0

    CSS Dynamic Footer


    Hello, I'm trying to accomplish this s23.postimg.org/icl8x4ive/help.jpg

    Do I have to use javascript to tell it to change styles when it gets inside of the main content or is there a way of doing it via CSS?
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2011
    Posts
    118
    Rep Power
    50
    Hunh? No idea what you mean "when it gets inside of the main content." When WHAT gets inside of the main content.
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    310
    Rep Power
    162
    A short answer based on footer behaviour showing in the pictures, is the container that the header/content/footer are in needs to be position:relative; but if that doesn't work;

    I've got an example I just made with nothing else in it, just to show you a way of doing the footer with the bare minimum you'd need. Note the padding-bottom on the content div to ensure space for the absolute placed footer & make sure the container is position relative:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    html,body {
      height:100%;
      width:100%;
      margin:0;
    }
    #container {
      width:100%;
      min-height:100%;
      background-color:green;
      position:relative;    
    }
    #header {
      width:100%;
      height:80px;
      background-color:red;
    }
    #content {
      width:100%;
      background-color:green;
      padding-bottom:80px;
    }
    #footer {
      position:absolute;
      bottom:0;
      height:80px;
      width:100%;
      background-color:orange;
    }
    -->
    </style>
    </head>
    <body>
    <div id="container">
        <div id="header">head</div>
        <div id="content">stuff</div>
        <div id="footer">foot</div>
    </div>
    </body>
    </html>
    Last edited by LDHosting; June 9th, 2013 at 11:38 AM.
    Quality European Web Hosting - LDHosting.com
    High Quality, Low Cost Web Hosting Services
    www.ldhosting.com
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    6
    Rep Power
    0
    Thanks for the help, I'm still running into the problem where if they re-size the page the footer won't stay at the bottom. If I make it position: fixed; it works yet when I scroll over my main content the footer comes along and I'm trying to make it so it stays at the bottom of my content, yet always at the bottom of the page.

    Here is a pic to better explain.

    s14.postimg.org/jbmdue7s0/test_Footer.jpg
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    310
    Rep Power
    162
    My apologies it seemed to work yesterday. I've changed my code above to work properly now:
    1) Container min-height:100%; instead of height:100%;
    2) Container background colour is the same as the content div (in case content is less than screen size, container background fills screen) keeping content fully dynamic.
    3) Removed height from content, keeping it fully dynamic without strange behaviour.
    Last edited by LDHosting; June 9th, 2013 at 11:40 AM.
    Quality European Web Hosting - LDHosting.com
    High Quality, Low Cost Web Hosting Services
    www.ldhosting.com
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    6
    Rep Power
    0

    Thanks!


    Thanks for the help, idk why making the content 100% escaped my mind

IMN logo majestic logo threadwatch logo seochat tools logo