Question

Hello I have the following problem. I embedded my footer with a width and height. Up to this point the footer didn’t have a background color. Now I thought it would be to have the footer stretch across the entire width and giving it a background color.

My problem is, that I don’t know how to make it possible to get that footer filled with a color that will easily simply said “reapeat-x” that color. I did it with my background body. I cannot easily create an image because the content of the main page is not fixed to one height. I also would like to know how to realize that the footer of this example will stay on bottom?

I found an example where you can see what I mean when you resize the solution on this page:

http://razzi.me/tour

Hope this makes it clear what I am trying to achieve. I really would appreciate if there is someone who could help me out.

thanks a lot.

Answer 1

To achieve this effect, you need to place your footer outside the wrapper. I typically use this sticky footer.

HTML

<div class="wrapper">
    <div class="push"></div>
</div>
<div class="footer"></div

CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto;
    margin: 0 auto -50px;
    width: 960px;
}
.footer, .push {
    height: 50px;
}

.footer {
    width: 100%;
    background: blue;
}

JS Fiddle: http://jsfiddle.net/3KDYX/