CSS need div to extend it's containers width

Question

This is my current HTML structure. The footer div is sitting alone in the BODY.

  <div id="footer">
     <div class="container">
        <div id="footer-bg">
           <div class="footer1">
              <p class="p1">asd</p>
              <p class="p2">asd</p>
           </div>

           <div class="footer2">
              <p class="p1">asd</p>
              <p class="p2">asd</p>
              <p class="p3">asd</p>
           </div>

           <div class="footer3">
              <p class="p1">asd</p>
           </div>
        </div>
     </div>
  </div>

Here's the CSS for it:

  #footer
  {
     position: relative;
     background: url('../footer-bg-repeat.jpg') repeat-x;
     height: 307px;
  }

  #footer #footer-bg
  {
     background: url('../footer.jpg') no-repeat top left;
     height: 528px;
     width: 1587px;
     position: absolute;
     left: -380px;
     top: -221px;
  }

  #footer .footer1
  {
     position: absolute;
     top: 137px;
  }

  #footer .footer1 .p1
  {
     position: absolute;
     left: 500px;
     background: #dcdcdc;
     height: 23px;
     width: 80px;
     text-align: center;
     line-height: 25px;
     font-weight: bold;
  }

  #footer .footer1 .p2
  {
     position: absolute;
     left: 1000px;
     top: -20px;
     background: url() no-repeat top right;
     height: 40px;
     width: 249px;
     text-indent: -9999px;
     z-index: 6;
  }

  #footer .footer2
  {
     position: absolute;
     top: 159px;
     height: 23px;
     width: 100%;
     background: #000;
  }

  #footer .footer2 p
  {
     display: inline;
     line-height: 25px;
     color: #636466;
     height: 23px;
  }

  #footer .footer2 .p1
  {
    position: absolute;
    left: 500px;
    background: url() no-repeat center right;
    width: 175px;
  }

  #footer .footer2 .p2
  {
     position: absolute;
     left: 700px;
     background: #dcdcdc url() no-repeat 60px 8px;
     width: 75px;
     padding-left: 15px;
  }

  #footer .footer2 .p3
  {
     position: absolute;
     left: 800px;
  }

  #footer .footer3
  {
     position: absolute;
     top: 190px;
  }

  #footer .footer3 .p1
  {
     position: absolute;
     left: 500px;
     width: 1000px;
  }

I'm trying to get .footer2 and .footer3 to extend the width of the container allowing me to have a background colour set for what ever width the screen may be.

Setting 100% width just gets it to the size of the container - As I'd expect. How can I, though, get it to the width of the page?

Answer 1

Try setting both left and right property to 0;