How do I make my footer background full screen? (HTML / CSS site)

Question

I've been trying to solve this for a couple of hours, but I haven't found a good solution in this forum.

So, how do I make the footer background here stretch all the way to the left and right, the way my header does?

I want the text to remain in four columns in the center of the screen with its current width (950px), but the background to fill the viewer's screen, whichever width that may be.

Thanks.

Maria

Answer 1

simple footer's table width:100%;

here is the screenshot after the change

by the way container design (ex. using div) are far better than tabular design....the scope of building a beautiful site using div is larger then using tables

Answer 2

You need to create a div outside of the main wrapper (if you have one).

This div will be a container for your footer content. Simply set it's width to 100%.

Then for the content of your footer which you want to be 950px in width, simply create another div inside the container div and assign its width to 950px and center is using margin: auto;

Example HTML:

<div id="footer-container">

  <div id="footer-content">



  </div>

</div>

CSS:

 #footer-container {
  width: 100%;  
}
#footer-content{
  width: 950px;  
  height: 80px;
  margin-left: auto;
  margin-right: auto;
}