My footer won't stay at the bottom

Question

footer {
    text-align: center;
    background-color: #fff;
    line-height: 72px;
    margin: 0; 
    position: relative;
    max-width: 100%;
    height: 60px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: auto;

}


footer, .push {
    height: 60px; /* '.push' must be the same height as 'footer' */
    max-width:100%;
}

/** Sticky Footer by Ryan Fait -http://ryanfait.com/ */

.cf:before
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/*http://nicolasgallagher.com/micro-clearfix-hack/ */

HTML

<div class="cf"></div>

<div class="push"></div>
</main>
<footer><div>
<ul>
<li>NAME</li>
<li>DESIGN</li>
<li>Portoflio </li>
</ul>
</div>
</footer>

</body>
</html>

What do I do?

Answer 1

in CSS go:

footer {
    text-align: center;
    background-color: #fff;
    line-height: 72px;
    margin: 0; 
    position: fixed; <---
    max-width: 100%;
    height: 60px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: auto;
    bottom:0; <---
}

Answer 2

You need to wrap your entire contents before the footer in a wrapping element. The example you are reading is propably this one. Using a fixed element on the footer is something I would not suggest in this matter.