CSS footer doesn't stick to the bottom of the page

Question

I'm having some difficulties in setting up a sticky footer in my css layout. I've been trying to go with the idea from http://www.cssstickyfooter.com/ but the footer doesn't stay at the bottom of the page if the content in the divs isn't high enough.

The css file:

* {
 margin:0;
 padding:0;
 } 

body {
 height:100%; 
 margin:0px; 
 padding:0px;
 }

#wrap {
 min-height: 100%;
 }

#container {
 overflow:auto;
 padding-bottom: 150px;
 text-align:left;
 width:800px;
 margin:auto;
 }

#header {
 height:240px; 
 margin-top:20px;
}

#navigation {
 float:left; 
 width:800px; 
 margin-top:20px;
}

#content-container {
 float:left;
 width: 800px;
}

#left {
 clear:left; 
 float:left: 
 width:480px; 
 height: auto;
 margin: 20px 0px 20px 0px;
 padding: 20px 10px 20px 10px;
}

#right {
 float:right; 
 width:275px; 
 height:auto;
 margin: 20px 0px 20px 0px;
 padding: 20px 10px 20px 10px; 
}

#footer {
 position: relative;
 clear:both;
 height:150px;
 margin-top: -150px;
}

#columns {
 width:800px;
 height:150px;
 margin:auto;
}

#colleft {
 float:left;
 width:400px;
 height:150px;
}

#colright {
 float:right;
 position:relative;
 width:260px;
 height:150px;
}

The html file:

<div id="wrap">

    <div id="container">

        <div id="header"></div>

        <div id="navigation">

            <div id="lang"></div>

        </div>

        <div id="content-container">

            <div id="left"></div>

            <div id="right"></div>

        </div>

    </div>

    <div id="footer">

        <div id="columns">

            <div id="colleft"></div>

            <div id="colright"></div>

        </div>
</div>

Bauman

Unrelated, but #left has float:left: with a colon instead of a semi colon. – Hathorn

Here's a fiddle that has colors for the various div's, so it is easier to play with. jsfiddle.net/eQCVC I changed the float:left: to float:left;. – Hathorn

Answer 1

I believe you are missing

html { height: 100%; }

from your CSS.

Despinadespise

Answer 2

Have you considered using position: fixed?

#footer { position: fixed; bottom: 0px; height:150px; }

The reason your example is not working is because your #footer is inside the #wrap, using that CSS the #footer must be outside of the wrap, as it is the wrap which is setting the min-height to 100%, and the #footer is being pulled upwards using the negative margin.

The html tag also needs a height of 100% to work.

So to recap, #footer can't be nested, and html needs height: 100%;

Example here --- http://jsfiddle.net/CK6nt/

Hope that helps! Laurie

Toreutic

He doesn't want a fixed footer. – Bellda

Yep, that's fine. Just giving a solution and an idea ;) Laurie! – Toreutic

Answer 3

In your footer class:

#footer {
position: relative;
clear:both;
height:150px;
margin-top: -150px;
}

Change position: relative; to position:fixed so the class should look like this:

#footer {
position: fixed;
clear:both;
height:150px;
margin-top: -150px;
}

Hinson

Answer 4

Everything seems fine to me, you just have to add position :absolute so the footer placed out of normal document flow and bottom:0 will help you to bring the footer down the page.

#footer {
position:absolute;
bottom:0;
}

Yesima