Make my footer ALWAYS stay at the bottom

Posted on 2007-10-10
Last Modified: 2016-08-29

I need to design a liquid layout so that as more text is added, the bottom footer moves down.

My layout works well if there is lots of text, but it does not work if there is little text.

How can I make the footer ALWAYS stay at the bottom?  If you download my example you will see my problem.

Question by:hankknight
    LVL 30

    Accepted Solution

    Hey m8,

    The basic idea is to have a div 100% height of the screen and then your footer comes after that div. The footer will have a negative top margin equivalent to its height. You would also have a bottom padding equivalent to the height of the footer, this would be set on a div inside the container.

    <div id="container">
    <div id="main">the page stuff</div>
    <div id="footer">footer</div>

    css would be like this

    html, body {
    div#container {
    div#main {
    div#footer {

    LVL 16

    Author Comment

    Thanks for your idea but it is still not working for me.

    Check out my changes:

    What am I doing wrong?
    LVL 16

    Author Comment

    I have accepted your answer because it makes some good points and I have posted a related question here:

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Highfive Gives IT Their Time Back

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Suggested Solutions

    This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
    In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    12 Experts available now in Live!

    Get 1:1 Help Now