Footer not going to bottom of page?

I have a footer at http://puppetweb.ca/play/ and you see the categories list on the left is longer then the actual browser window. I'd like to make the foote开发者_如何学Pythonr attach to the bottom of the page not the window, but I can't seem to figure it out? Any help?

Thanks!

Give the footer a position:static; CSS property and a clear:both; CSS property:

#footer {
    position:static;
    clear:both;
}

Since the default positioning is static, you could also just remove all the position-related properties:

/* play, line 432 */
#footer {
    background: none repeat scroll 0 0 #272433;
/*    bottom: 0; /* REMOVED */
    color: #FFFFFF;
    height: 40px;
    margin: 0 auto;
/*    position: absolute; /* REMOVED */
    text-align: center;
    width: 92%;
    clear:both; /* ADDED... could probably also be `clear:left` */
}

The problem arises because most of the elements in your document are floating left. But floating elements are outside the normal flow:

For more information, see the w3c's Visual Formatting Model.

When inspecting the CSS property of the #footer element I see

margin: 0 auto;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;

Try removing the margin-top property. What the CSS is trying to do is assign a value of 0 to the top and to the bottom pulling the element into the middle of the page.

reduce the widths of both 'grid_10' and set them to float left. remove the postion of fixed from the footer and set 'clear : both' so that it doesn't float around the two grid_10