Footer Problem

[iamaw]

Hi…

Im still fairly new to all of this and I have been lurking around CSS-Tricks for a while now. I was playing around, creating a new layout for one of my sites…

Here is what I have at the moment:

HTML:

Code:

headerLeft

headerRight

contentLeft

contentRight

footerLeft

footerRight

CSS:

Code:

@charset “utf-8”;
/* CSS Document */

body{
font-family:Arial, Helvetica, sans-serif;
background:#b1d784;
}

* {
margin: 0;
padding: 0;
}

#mainContainer{

}

#header{
width:100%;
height:30px;
border-bottom:1px dotted black;
background:#91c948;
}

#headerLeft{
width:249px;
height:30px;
border-right:1px dotted black;
background:#91c948;
float:left;
}

#headerRight{
height:30px;
background:#91c948;
float:left;
}

#clearLeft{
clear:left;
}

#contentContainer{
width:800px;
}

#contentLeft{
width:249px;
height:500px; /* temp */
border-right:1px dotted black;
float:left;
}

#contentRight{
width:550px;
height:500px; /* temp */
float:right;
}

#clear{
clear:both;
}

#footer{
width:100%;
height:100px;
border-top:1px dotted black;
background:#91c948;
}

#footerLeft{
width:249px;
height:100px;
border-right:1px dotted black;
background:#91c948;
float:left;
}

#footerRight{
height:100px;
width:550px;
background:#91c948;
float:left;
}

What is the best way to make my footer stick to the bottom of the page no matter what size the user’s browser window is? Currently it stays put and leaves an empty gap below it. (see the screenshot) Im sure there is a simple way to do it, I just have no clue and would love to learn how :). Hopefully it is possible with the ways I worked my CSS. Thanks in advanced!

[img]http://farm4.static.flickr.com/3271/2633287270_fc39a9356e_o.gif[/img]

[Argeaux]

check this out:

http://ryanfait.com/sticky-footer/

[iamaw]

Awesome, thanks for that link. It worked for the most part, but I think I have some tweaking to do due to my sloppy CSS code.

[Author]

Posts