Hello,
What you should do is create a wrapper of 100% height and 100% width which
contains both the footer and #container.
html, body {
height: 100%;
width: 100%;
}
.wrapper {
height: auto !important;
height: 100%;
min-height: 100%;
position: relative;
}
#container {
padding-bottom: height of footer;
}
#footer {
position: absolute;
bottom: 0px;
left: 0px;
}
HTML :
<div class="wrapper">
<div id="container">text</div>
<div id="footer">text</div>
</div>
The footer will always be at the bottom of .wrapper, and .wrapper wil expand
if #container will be bigger than 100% of the viewport.
#container will always push some extra space for the footer at the bottom,
so the footer will always be visible :)
Good luck!
Lourens Thalen,
The Netherlands
2008/10/10 Juan Diaz-Bustamante <[EMAIL PROTECTED]>
> Hello,
>
> I'm doing a website where container is 960px width and footer is 100% px
> width being the footer out of the container.
> The site is long in some pages so when you scroll down you see the footer
> at
> the bottom as expected. But when the container is smaller the footer stays
> just after the container, not staying at the bottom of the screen as I
> would
> like it to be. I'm using this:
>
> #container {
> background: #000;
> width:960px;
> margin 0 auto -250px;
> min-height: 100%;
> height: auto !important;
> height: 100%;
> }
>
> #footer {
> margin: 0 auto;
> clear: both;
> background-color: #111;
> height: 250px;
> }
>
> Thank you in advance for any help you may provide
>
> JohnDBB
> ______________________________________________________________________
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
