Keeping the footer down

[Danilux]

Hi, I have a problem with a site I’m building it’s almost ready but since I don’t have much content for some of the inner pages I see that the footer sit halfway up the page leaving a blank space underneath, I know if I give a fix height to the content area the footer would stay down but I want the footer to be able to move down further when I add more content. I found a solution that included positioning the footer div absolute but I don’t like to position things absolute or fixed unless that’s the last option. In firefox the footer appears at the bottom of the viewport even thought there’s no content I have this problem in Chrome and Safari, I hope you guys can help me, here’s the website configuration:

Html:

Code:

CSS:

Code:

#wrapper {
position: relative;
min-height: 700px;
height: 100%;
}

.container { width:900px; height: 100%; margin: 0 auto;} /*Centers both container classes*/

#content {
position: relative;
overflow: hidden;
}

#footer .container {position: relative; width: 900px; height: 174px; overflow: hidden;} /*174px is height of the footer bg*/

[nStyle]

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

Maybe?

[Danilux]

Thank you so much nStyle, It worked great, I have a question that’s not documented in the developer’s site, That div with the class "push" is really necessary ? Cause I didn’t add it and it still works but maybe I’m missing something and It’s important for something. Thanks again bro.

[Author]

Posts