Sticky Footer, Or Just Footer

HTML & CSS
1

So, just recently I have attempted a new sticky footer design based on the article written by [URL=“http://www.sitepoint.com/forums/member.php?25195-Paul-O-B”]PaulO’B and I wanted to see if I have learned anything by the previous experiences. Paul, if you’re available… can you peek at the link below and let me know if this is accurate?

LINK-
http://www.securehostserver.info/proton/

The only thing that I do not understand is that in this link above I did not apply a negative margin-top (that measures the height of the footer-container) in order to make it work. Am I missing something?

Thanks again for being a great teacher!

Todd

2

Todd, Here’s an easy test you can perform while awaiting Paul’s response.

Open the following page and see where the footer lies.


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Proton Power | Cellulose to Hydrogen Power</title>
<link href="http://www.securehostserver.info/proton/c/style.css" rel="stylesheet" type="text/css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:700' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="outer">
    <div id="header-container">
      <div id="stripe-container">
            <div id="stripe">
                <div id="header">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Technology</a></li>
                        <li><a href="#">Media</a></li>
                        <li><a href="#">Investors</a></li>
                        <li><a href="#">Careers</a></li>
                        <li><a href="#" class="last">Contact Us</a></li>
                    </ul>
                    <h1 id="logo"><a href="#">Proton Power</a></h1>
                    <a href="#" class="intranet">Employee Login</a>
                </div><!-- end #header -->
            </div><!-- end #stripe -->
        </div><!-- end #stripe-container -->
    </div><!-- end #header-container -->
</div><!-- end #outer -->
<div id="footer-container">
    <div id="footer">
        <h3><a href="#">Proton Power</a></h3>
        <div id="statement">
            <h4>Offering Renewable Solutions</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla neque felis, viverra sit amet vehicula et, gravida volutpat sapien. Nunc pulvinar, neque id suscipit tincidunt, lorem eros. Nulla ultrices lobortis pretium.</p>
        </div><!-- end #statement -->
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Technology</a></li>
            <li><a href="#">Media</a></li>
            <li><a href="#">Investors</a></li>
            <li><a href="#">Careers</a></li>
            <li><a href="#">Contact Us</a></li>
            <li class="last"><a href="#">Employee Login</a></li>
        </ul>
    </div><!-- end #footer -->
</div><!-- end #footer-container -->
</body>
</html>
3

ronpat, I see what you mean. I went ahead and added a test page with your example and then added a negative bottom margin to the #outer and it does stick to the bottom, but when the viewport is decreased in height - the footer items slide onto the header items.

LINK-
http://www.securehostserver.info/proton/index3.php

4

Todd, I believe the following changes to your css should fix you up:


#outer {
    [color=blue]margin:0 0 -402px;[/color]  /* CHANGE */
}

#header-container {
    [color=blue]border-top:402px;[/color]  /* ADD */
}

#footer-container {
    [color=blue]margin:0;[/color]          /* DELETE {margin:90px 0 0} entirely or set to zero */
    [color=blue]clear:both;[/color]        /* ADD */
}

If you need space above the footer-container, you can add padding-bottom to #outer instead.

5

ronpat, I made these changes to the stylesheet but it seems to still look a bit off. Try the original link below and notice where the footer-container stops right beneath the banner image. Weird.

LINK-
http://www.securehostserver.info/proton/

6

Todd, the solution that I posted is incorrect. Don’t know how I dreamed it up nor why I thought it worked.

The following will work correctly:


#outer {
    [color=blue]margin:-402px 0 0;[/color]  /* CHANGE */
}

#header-container {
    [color=blue]border-top:402px solid transparent;[/color]  /* CHANGE */
}

#footer-container {
    margin:0;
    clear:both;
}

If you need space above the footer-container, you can add padding-bottom to #outer.

Sorry for the goofy post.

7

Works! Thanks ronpat for looking into this for me. I really appreciate it!

8

You’re welcome, Todd. Thanks for the feedback. Glad to know it works, this time. :slight_smile: