CSS besoin div pour étendre sa largeur de conteneurs

Question

Ceci est ma structure HTML actuelle. Le div pied de page est assis seul dans le corps.

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

Voici le CSS pour elle:

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

J'essaie d'obtenir .footer2 et .footer3 pour étendre la largeur du conteneur me permettant d'avoir un ensemble de couleur de fond pour ce que la largeur jamais l'écran peut être.

La définition d'une largeur de 100% permet de l'ajuster à la taille du conteneur - Comme je m'y attendais. Comment puis-je, cependant, l'obtenir à la largeur de la page?

Answer 1

Essayez de définir les propriétés gauche et droite sur 0;

Answer 2

Vous n'avez pas bien défini la question.

si vous voulez le mettre en marge de réglage moyen

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

si vous voulez dire quelque chose plug-in d'autre télécharger Firebug pour Firefox et inspectez le pied de page d'une page qui a fait ce que vous voulez faire et jeter un oeil à la structure et règles css. cela fonctionne toujours