Footer sticks to bottom but covers content

HTML & CSS
1

Hi all,

For a design I’m making, I found this css code to make the footer stick to the bottom of the page without covering up content. The “push” div should provide a gap between the last content and the footer div and push it downward if required by the amount of content. The [URL=“http://ryanfait.com/sticky-footer/”]demo provided with the script shows this clearly.

Now, I know I have changed the “wrapper” into “container” and I have used id’s in stead of classes, but I reasoned this should be no problem, right? Nevertheless, my footer keeps sliding over the content part in all browsers when I resize my window to a smaller size. You can see what I mean here.

I tried putting a clear: both within my push div in css, but no luck. When I place something inside this div in my html, it shows up directly onder the content to the right.

This is the relevant part of my css:


*{margin:0;padding:0;} 

html, body {
height: 100%;
font-size: 11px;
font-family: Verdana, Tahoma, Helvetica;
color: #768591; 
}
 
div#container {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -80px;
width: 940px;
}

div#push {
height: 80px;
}

div#footer {
height: 80px;
background-image: url(gui/footer_back.jpg);
background-repeat: repeat-x;
backgroud-position: top;
}

div#footernav {
width: 940px;
height: 56px;
background-image: url(gui/footer_navback.jpg);
background-repeat: no-repeat;
backgroud-position: top left;
margin: 0 auto;
padding-top: 24px;
}

div#footerlinks {
float: left;
padding-left: 180px;
color: #ffffff;
font-size: 10px;
width: 700px;
}

div#footerlinks a:link, div#footerlinks li a:visited, div#footerlinks li a:active{
text-decoration: none;
color: #ffffff;
}

div#footerlinks a:hover {
text-decoration: underline;
color: #ffffff;
} 

div#copyright {
float: left;
padding-left: 20px;
font-size: 10px;
margin-top: 15px;
}

And the html used:


<div id="container">
    <div id="top">
        <div id="logo"><img src="gui/gui_twiztedlogo.jpg" alt="Welkom bij Twizted Imagebuilding"></div>
        <div id="menu"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home','','gui/menu_home02.jpg',1)"><img src="gui/menu_home01.jpg" alt="startpagina" name="home" width="62" height="32" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('consultants','','gui/menu_consultants02.jpg',1)"><img src="gui/menu_consultants01.jpg" alt="maak kennis met onze consultants" name="consultants" width="94" height="32" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('solutions','','gui/menu_solutions02.jpg',1)"><img src="gui/menu_solutions01.jpg" alt="reputatie-oplossingen voor mensen en merken" name="solutions" width="83" height="32" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('clients','','gui/menu_clients02.jpg',1)"><img src="gui/menu_clients01.jpg" alt="cases en realisaties" name="clients" width="71" height="32" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('community','','gui/menu_community02.jpg',1)"><img src="gui/menu_community01.jpg" alt="maak deel uit van onze community" name="community" width="95" height="32" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contact','','gui/menu_contact02.jpg',1)"><img src="gui/menu_contact01.jpg" alt="neem contact met ons op" name="contact" width="71" height="32" border="0"></a></div>
    </div>
    
    <div id="header"><h1 class="header">test</h1></div>

    <div id="submenu"><div id="subnav">
        <ul>
        <li class="title">training & coaching</li>
        <li><a href="#">uitstraling & stijl</a></li>
        <li><a href="#">personal branding</a></li>
        <li><a href="#">lichaamstaal</a></li>
        <li><a href="#">presentatie</a></li>
        <li><a href="#">eerste indruk</a></li>
        <li class="title">consultancy</li>
        <li><a href="#">brand strategy</a></li>
        <li><a href="#">brand identity design</a></li>
        <li><a href="#">marketing consultancy</a></li>
        <li><a href="#">online marketing</a></li>
        <li><a href="#">personal branding</a></li>
        </ul>
    </div></div>

    <p>Your website content here.</p>

    <div id="push"></div>
    
</div>

<div id="footer">
    <div id="footernav">
        <div id="footerlinks"><a href="#">myTwizted</a> | <a href="#">reputatieblog</a> | <a href="#">stylekitchen</a> | <a href="#">newsletter</a> | <a href="#">algemene voorwaarden</a> | <a href="#">contacteer ons</a></div>
        <div id="copyright">&copy 2009 Twizted Imagebuilding | Meir 24 - bus 7 | 2000 Antwerpen | 03 206 50 50 | [email]office@twizted.be[/email]</div>
    </div>
</div>

Does anyone know where it goes wrong?
Thanks in advance for your assistance.

Stef

2

Hi, your container is collapsing because of the floated elements and is going to a minimum of 100% height and won’t expand, you need to contain your floats, and make sure IE6 has haslayout.

As for the sticky footer you are trying, you have it backwards, on #container you are supposed to use a negative TOP margin, not bottom, so change the margins to

margin:-80px auto 0;

Also give #container to contain the floated children also.

Also, you are doing this ltitle trick, and IE7 suffers from it greatly, bolded.

div#container {
[b]min-height: 100%;
height: auto !important;
height: 100%;[/b]
margin: 0 auto -80px;/*switch it to -80px auto 0*/
overflow:hidden;/*add*/
width: 940px;
}

Just do this


div#container {
[b]min-height: 100%;[/b]
margin: 0 auto -80px;/*switch it to -80px auto 0*/
overflow:hidden;/*add*/
width: 940px;
}
* html div#container {
overflow:visible;
height:100%;
}
3

Hi Ryan,

I just tried what you suggested, but this pushes my content UP so the logo and menu are no longer visible.

4

Add in this:


div#top {
  margin-top:80px;
}
5

Okay, fixed! Thanks!

One additional question tough. The footer is down at the bottom of the page now, and is pushed downward when content requires this. However, the whole idea of this “push” div was to provide a whitespace between the submenu/content area and the footer so they wouldn’t stick to each other.

Firebug reveals this push div is on top of the page somewhere, right where the content and submenu start. How do I make that div stretch the full 940px and stay BENEATH the submenu/content to provide some spacing?

6

You can add this:


div#push {
  clear: both;
}
7

Huh? When I tried this earlier, that did absolutely nothing, and now it works like a charm! Must have been a typo.

Thanks for all your input guys!

8

Sorry, I tried it out locally and worked ifne so you must not have added something in, because locally it was perfect :).

Either that or I forgot to tell you usomething.