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:
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.
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/