Home » Odeon Blogs » Calvin, Weaver »

Flush footer with css to bottom of page

26 Oct 1

Flush footer with css to bottom of page

Flushing the footer to bottom of page with css

So, like me, you are a perfectionist and you absolutely hate it when pixels are not in its right place?

Well then, you have come to the right place because we can write some valid CSS together. Without using long, messy hacks or unnecessary, extra HTML, without imposing hackish "min-height attributes" in our content div, we are going to get our footer flushed properly to the bottom of a page.

This solution works correctly in all major browsers - internet explorer 5 and up, firefox, safari, opera and more. All we really need is 15 lines of CSS and a sprinkle of HTML markup.

Flushing the footer to page bottom with css

Let's start by including the following 15 lines into your stylesheet:

* {
    margin: 0;
}

html, body {
    height: 100%;
}

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}

.footer, .push {
    height: 4em;
}

Note that the negative margin imposed on the wrapper class should always be the absolute equivalent of the full height of the footer and push classes. If you add any paddings or borders, take that into account. Some basic maths is necessary ;-)

HTML structure of page with flushed footer

If you already have an existing HTML structure, you have to be sure that the wrapper class and the footer class are imposed as the final wrappers and direct children of the body tag. It wouldn't work out if additional divs are outside the wrapper or the footer class - unless the extra divs are absolutely positioned with css. So here's the structure you should adhere to:

<html>
    <head>
        <link rel="stylesheet" href="yourstyle.css" />
    </head>
    <body>
        <div class="wrapper">
            <p>Whatever your content says</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Whatever your footer says</p>
        </div>
    </body>

</html>

Multicolumn layout with footer flush

If you have multicolumns inside your wrapper class, you will need to impose clear to the push div. Simply add:

.footer, .push {
    clear: both;
}

Category: CSS

Tagged as: css

Discussion

learn to code on May 07, 2012 - 18:54 said:

That's cool, except it doesn't work in all circumstances, even with a single-column page.

If you don't understand why, it's because you don't understand HTML or CSS.

Thanks for the useless nothing, idiot.

Flush footer with css to bottom of page