CSS нужен div для увеличения ширины контейнеров

Question

Это моя текущая структура HTML. Div нижнего колонтитула сидит один в теле.

  <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>

Вот CSS для этого:

  #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;
  }

Я пытаюсь заставить .footer2 и .footer3 увеличить ширину контейнера, позволяя мне установить цвет фона для любой ширины экрана.

Установка 100% ширины просто возвращает размер контейнера - как я и ожидал. Как я могу получить его на ширину страницы?

Answer 1

Попробуйте установить для свойства left и right значение 0;

Answer 2

Вы не правильно определили вопрос.

, если вы хотите установить средние поля

margin:0 10px;
width:%your pages width%;

если вы имеете в виду что-то еще, скачайте плагин Firebug для Firefox и проверьте нижний колонтитул страницы, который сделал то, что вы хотите сделать, и посмотрите на структуру и правила CSS. всегда работает