How to make the footer stick to the bottom?

Question

I was building a portfolio website purely out of html5 and css and I am stuck at sticking the footer at the bottom of the page.

Here are the codes:

contact.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>contact | sadman s.</title>
    <link type="text/css" rel="stylesheet" href="stylesheet.css">
    <link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
</head>

<body>

    <header>
        <h1>sadman s.</h1>
    </header>

    <!--NAVIGATION BAR-->
    <nav>
        <ul>
            <li><a href="/code/index.html">h o m e</a></li>
            <li><a href="/code/blog.html">b l o g</a></li>
            <li><a href="/code/portfolio.html">p o r t f o l i o</a></li>
            <li><a href="/code/about.html">a b o u t</a></li>
            <li><a href="/code/contact.html">c o n t a c t</a></li>
        </ul>
    </nav>
    <!--NAVIGATION BAR ENDS-->

<!--BODY STARTS HERE-->
<body>

    <form>

        <label>Name</label>
        <input name="name" placeholder="Name">

        <label>Email</label>
        <input name="email" type="email" placeholder="Email">

        <label>Message</label>
        <textarea name="message" placeholder="Your message"></textarea>

        <input id="submit" name="submit" type="submit" value="SEND">

    </form>

</body>
<!--BODY ENDS HERE-->

<!--FOOTER STARTS HERE-->
<footer>
    <div id="footer_line"></div>

    <!--FOOTER LINKS BAR-->
<nav>
    <ul>    
        <li><a href="https://twitter.com/sadmanshawmik" target="blank"><span id="footer_bar">t w i t t e r</span></a></li>
        <li><a href="http://instagram.com/shawmikiki" target="blank"><span id="footer_bar">i n s t a g r a m</span></a></li>
        <li><a href="http://github.com/" target="blank"><span id="footer_bar">g i t h u b</span></a></li>
    </ul>
</nav>
<!--FOOTER BAR ENDS-->
<p>copyright © 2014 - <span id="footer_link"><a href="/code/index.html">sadman.de</a></span>. all rights reserved.</p>

</footer>

</html>

stylesheet.css

        * {
    margin: 0;
    padding: 0;
    font-family: Droid Serif;
}

body {
    font-family: Droid Serif;
}

header {
    font-family: Droid Serif;
    font-weight: lighter;
    font-size: 1.8em;
    text-align: center;
    text-transform: uppercase;
    margin-top: 25px;
}

/*NAVIGATION BAR*/

nav {
    position: relative;
    list-style: none;
    margin: 25px 0 40px 0;
    padding: auto;
    text-align: center;
    font-family: Droid Serif;
    text-transform: uppercase;
}

nav > ul > li {
    display: inline;
}

nav > ul > li > a {
    display: inline-block;
    padding: 0 32px 0 32px;
    color: #000;
    text-decoration: none;
}

a:hover {
    color: #00d8a3;
    text-decoration: none;
    transition: color 0.5s ease;
}

a:active {
    color: #00d8a3 !important;
    text-decoration: none;
}

/*BODY*/


h2 {
    font-weight: 100;
    text-align: center;
    font-family: Droid Serif;
}

table {
    border: 2px;
    margin: -10px auto 15px auto;
}

td {
    padding: 20px;
}

table tr td img {
    -webkit-font-smoothing: antialiased;

    opacity: 1;

    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
}

table tr td img:hover {
    opacity: 0.7;
}

/*FOOTER*/

footer {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: 15px;
    width: 100%;
    clear: both;
}

#footer_line {
    width: 90%;
    border: 1px solid #696969;
    margin: auto;
}

p {
    margin-top: 0px;
    text-align: center;
    font-size: 0.6em;
}

#footer_bar {
    text-transform: lowercase;
}

#footer_link {
    color: #00d8a3;
    text-decoration: none;
}

#footer_link:hover {
    color: #000000;
    text-decoration: none;
}



/*CONTACT FORM*/

label {
    display: none;
    margin-top: 20px;
    letter-spacing: 2px;
}

form {
    width: 437px;
    margin: 0 auto;
}

#form-div {
    background-color: e1e1e1;
    padding: 35px 35px 50px 35px;
    width: 450px;
    float: left;
    position: absolute;
    margin-top: 20px;
    margin-left: -260px;
}

input, textarea {
    width: 400px;
    height: 27px;
    background-color: #ffffff;
    border: 1px solid #efefef;
    padding: 10px;
    margin-top: 3px;
    font-size: 0.9em;
    color: #696969;
}

textarea {
    height: 100px;
}

input:focus, textarea:focus {
    border: 3px solid #00d8a3;
}

#submit {
    border-radius: 5px;
    background-color: #00d8a3;
    width: 400px;
    height: 50px;
    margin: 0 auto 56px auto;
    font-size: 1.5em;
    font-weight: bold;
}

Here is an image of my homepage, I want the footer to be at the bottom of the contact page like in the homepage. http://puu.sh/bzOUo/e1f2479945.jpg

Here is how it is showing up in the contact page right now: http://puu.sh/bzOWZ/ef02a73399.png

Also, if someone can help me align the "send" button in the contact page with the rest of the input boxes, it'd be really nice.

For button just add margin: 10px; for footer set height of form or set margin: 0 auto 182px; as you want footer down increase or decrease last pixel — herr, Sep 15 '14 at 09:13
This topic has been [discussed](http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page?lq=1) [several](http://stackoverflow.com/questions/3443606/make-footer-stick-to-bottom-of-page-correctly) [times](http://stackoverflow.com/questions/18469262/position-footer-at-bottom-of-page-having-fixed-header?lq=1) on Stackoverflow. — Hashem Qolami, Sep 15 '14 at 10:12
You can find lot of reference codes in [Css-tricks](http://css-tricks.com/) — Thangadurai, Sep 15 '14 at 10:19

score 1 · Accepted Answer · answered Sep 15 '14 at 10:16

1

Try absolute position on footer

footer
{
     position: absolute;
     bottom: 0;
     width: 100%;
}

Here is the Demo

answered Sep 15 '14 at 10:16

super

2,288
2
21
23

score 0 · Answer 2 · answered Sep 15 '14 at 10:18

0

hope this will work out. add this to your css code :

footer {
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  height:60px;
}
footer * {
  display:inline;
}

answered Sep 15 '14 at 10:18

NIkhil Reddy Ramolla

82
7

How to make the footer stick to the bottom?

2 Answers2