CODEWITHSUNDEEP
htmlcss
Steven
Steven

Reputation: 13975

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 footer attach to the bottom of the page not the window, but I can't seem to figure it out? Any help?

Thanks!

Upvotes: 0

Views: 2088

Answers (3)

Richard JP Le Guen
Richard JP Le Guen

Reputation: 28753

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:

Image showing a floating image that overlaps the borders of two paragraphs: the borders are interrupted by the image. From the w3c Visual Formatting model.

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

Upvotes: 4

GrahamJRoy
GrahamJRoy

Reputation: 1643

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

Upvotes: 0

Ryan
Ryan

Reputation: 1888

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.

Upvotes: 0

Related Questions