css footer not displaying at the bottom of the page

Question

this is my code for my footer, how can i make it display at the bottom of the page rather than right underneath my content above it?

/*footer */
#footer .column          


        

Answer 1

I guess what you mean is that you would like the footer to remain at the bottom of the page, even when there is insufficient content on the page to fill the height of the viewport?

If that is the case, you can use this trick: CSS sticky footer - http://ryanfait.com/sticky-footer/, http://www.cssstickyfooter.com/ or http://css-tricks.com/snippets/css/sticky-footer/

The sticky footer trick typically relies on declaring a minimum-height on a wrapper div. This means that you will have to reformat your HTML code as follow:

    

        /* Main body content */
    



    /* Footer content here */

For the CSS:

html, body, #wrap {
    height: 100%;
}
#wrap {
    height: auto;
    min-height: 100%;
}
#content {
    overflow: hidden;
    padding-bottom: (footer height);
}
#footer { 
    position: relative;
    margin-top: -(footer height); /* Note the negative value */
    height: (footer height);
    clear:both;
} 

If your footer may have variable height, you will have to set the bottom padding of #content, and top margin of #footer with JavaScript. The value depends on the computed height of the #footer element itself.