Search code examples
htmlcsssticky-footerliquid-layout

How do I Use the Sticky Footer Code with Responsive Layout?

I've been trying out the Sticky Code on various pages and the closest code that has got my pages looking half decent, would be the cssstickyfooter one.

I started a project a few months ago, that I intended on producing for a neighbour's daughter. I needed to create a website for a module in my college course and this idea was brought to me by the father of the owner of a new business. So I produced this site and submitted it to my lecturer(lots of visual faults to it and perhaps a lot of useless code).: Irish Baubles website

The major problem that I'm currently having with it, is the footer being stuck up half way up the page (For example, see the Business page). I've been fairly impatient with it and tried working with ryan fait's code layout but it didn't work out so well.

I now have the content pushed out and the footer at the bottom of the screen. My friend also suggest doing it with a fixed position but the content doesn't follow up behind the footer.

I've also pasted the pages of the new code from the business page, the boilerplate and the fluidlayout.

If I put clear:both under the #main css rule, it brings the content back in but the footer is still too high.

I'm just using this page as an example to start off with and then work my way through the rest of them.

Any help would be great! thanks!

Solution

  • The best method to use (that I've found) is to use the Ryan Fait solution for a sticky footer. Which would be to wrap everything except the footer to allow it to always be at the bottom.

    HTML

    <html>
    <head>
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>​

    CSS

    * {
  margin: 0;
}
html, body {
  height: 100%;
}
.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -4em;
}
.footer, .push {
  height: 4em;
}

    Here's a JSFiddle example. http://jsfiddle.net/EyrKy/3/

    Updated: here's an example with your layout http://jsfiddle.net/EyrKy/4/

    I hope this helps.