Forums

JohnMotylJr

I have never had to make a page that required the footer always sticking to the bottom of the page with small amounts of content. I am Googling way to do this but most are outdated and dont seem to be working to well..

Original Posting (footerStickAlt method)
HTML

<html>
<body>
<div id="nonFooter">
<div id="content">
</div>
</div>
<div id="footer">
</div>
</body>
</html>

CSS

html
{
height: 100%;
}

body
{
height: 100%;
}

#nonFooter
{
position: relative;
min-height: 100%;
}

* html #nonFooter
{
height: 100%;
}

#content
{
padding-bottom: 9em;
}

#footer
{
position: relative;
margin-top: -7.5em;
}

So what im guessing is that they want to force the footer outside of the actual container and than just pull it back in with negative amounts..

All i want to do is have my footer image always on the bottom of the page. Any updated or better ways to achieve this?
-Thanks

stevencrader

Try

footer {
position: fixed;
bottom: 0;
width: 100%;
height: 100px; /* choose any height */
}

springlab

stay away from fixed unless you want that behavior.
Use this:
http://www.cssstickyfooter.com/

LukyVj

Hi, It seems to work for me :

    footer{
        width:100%;
        position: absolute;
  height: 80px;
  clear:both;
  top:100%;
    }

JohnMotylJr

Holy ham-sammich, this is an old post that i thought marked solved. @LukyVj, thanks for the reply though :)

treehouse : what would you like to learn today?

Forums

[Solved] How do we make footers stick on the bottom these days...