How to create 100% width footers
This problem caused me a lot of pain and some headaches - how could I create a footer on a page that spanned the whole page from one side of the browser to the other? Most modern sites have 100% width footers with different backgrounds to the main body. Of course, with different page sizes, you can’t specify the background to the body tag as you would with the normal site background. Furthermore, if you place the footer inside the container/wrapper div, then it won’t span across 100% of browser
The solution is actually very simple.
Rather than having a single div for the footer, create 2 divs for the footer - one as div that will span the full 100% of the screen, the other similar to the container/wrapper of your main content that adjusts the same as your existing container and is centred. To the outer div (that spans all of the screen), apply the following CSS:
left: 0; // Zeros the div so that it goes from one side of the browser to the other
background: *Insert colour of choice*;
To the other div that you want to move at the same rate as your existing container/wrapper, simply add it as another selector along with the existing container - example:
Existing CSS:
#container {margin: 0 auto;
width: 800px;
overflow: auto;}
New CSS:
#container, footercontainer {margin: 0 auto;
width: 800px;
overflow: auto;}
I hope this helps anyone who had a similar problem to me - I told you the answer was simple in the end (even if I didn’t explain it that well!)
