Keeping Footer at the Bottom With CSS and HTML

Discussion in 'Web Design, HTML And CSS' started by ManzZup, Sep 30, 2013.

  1. ManzZup

    ManzZup New Member

    Joined:
    May 9, 2009
    Messages:
    278
    Likes Received:
    43
    Trophy Points:
    0
    Occupation:
    Production Manager:Software @ ZONTEK
    Location:
    Sri Lanka
    Home Page:
    http://zontek.zzl.org
    Yup another post on the same day, again something old but haven't answered properly on the internet.

    The issue is what every web designer keep searching for years after properly coding the theme :

    "the damn footer doesn't stay at the bottom"

    [​IMG]

    Usual solution



    1. One method suggested by most is to use position : absolute to the footer. But this is the what that wrecks a good template. The absolute position means it position the element according to absolute pixel values. But the problem is when the website is displayed in a monitor other than yours. Guess what will happen?
    2. Other involved using position : fixed to the footer. Again this is a lousy patch since this would put a permanent footer not at the real bottom of the page but the bottom of the screen. [know the difference]
    So here's a new way

    The Code Steps



    Step 1

    We deviate from the standard structure of

    ----header
    ----content
    ----footer

    model of web page.

    [​IMG]

    A slight adjustment. The new structure is :

    ----- top
    ----- ----- header
    ----- ----- content
    ----- footer

    [​IMG]

    HTML:
    <html>
     <head>
       <title>Put my footer down</title>
       <link href="style.css" rel="stylesheet" type="text/css">
      </head>
     <body>
        <div id="top">
            <div id="header">This is header stuff</div>
            <div id="content">This is awesome text stuff</div>
        </div>
        <div id="footer">This is footer stuff</div>
     </body>
    </html>
    
    NOTE: style.css is the style sheet we define stuff

    Step 2:

    Now we define the CSS stuff, the important elements are the top and footer elements. Others we don't have to worry about.

    Logic:



    We make the #top element with 100% height BUT it would push down the footer as well. Then an unnecessary scroll-bar appears. So what we do is tell to the #top element "hey bro give some of your space below to the #footer element as well". How we do this? by giving a (-)ve value to the margin property of the #top element

    NOTE: THE margin (-) value of #top element SHOULD BE THE SAME as the height property of the #footer element.

    style.css
    HTML:
    #footer{
            height: 50px;
    }
    #top{
            min-height: 100%;
            margin-bottom: -50px;
    }
    
    DONE ! yup, in 3 easy code lines everything works fine

    [works on all usable browsers :D]

    [​IMG]


    Defects:



    1. When your #footer element have borders and stuff you have to adjust the (-)ve value carefully.
    2. The height: 100% has some problems with strict doctypes.

    But overall the good is far more than the bad, so happy footer-downing :D
     
    Last edited by a moderator: Jan 21, 2017
    Sahat Maruli likes this.

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice