Creating a basic sticky footer using HTML and CSS

The snippets below can be used as a boilerplate for creating a basic sticky footer.

    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <div class="wrapper">
        <p>main content</p>

    <div class="footer">
        <p>footer content</p>
* {
    margin: 0;

html, body {
    height: 100%;

.wrapper {
    min-height: 100%;
    margin-bottom: -60px;

.wrapper:after {
    content: "";
    display: block;

.footer, .wrapper:after {
    height: 60px;

more HTML posts

more CSS posts