Innerhalb meines Footers sind noch 4 weitere Divs platziert.
Ich möchte, dass diese entweder dynamisch den gesamten Footer ausfüllen oder mit einer festen Breite alle zentriert platzieren.
Das Erstere wäre etwas besser, aber, wie ich denke, komplizierter.

Hat jemand eine Lösung?

HTML-Code:

        <div class="footer">
          <div class="footer1">
            <h2>KONTAKT</h2>
            <a href="#">info(at)bla.de</a><br />
            <a href="#"><img src="media/img/xing.png" alt="Xing" /></a><br />
            <a href="#"><img src="media/img/linkedin.png" alt="LinkedIn" /></a>
          </div>

          <div class="footer2">
            <h2>W3C</h2>
            <a href="http://validator.w3.org/check?uri=referer"><img
                src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
            <a href="http://jigsaw.w3.org/css-validator/check/referer">
              <img style="border:0;width:88px;height:31px"
                   src="http://jigsaw.w3.org/css-validator/images/vcss"
                   alt="CSS ist valide!" />
            </a>
          </div>

          <div class="footer3">
            <h2>Language / Sprache</h2>
            <a href="#"><img src="media/img/germany.png" alt="German" height="20" /></a> <a href="#"><img src="media/img/uk.png" height="20" alt="English" /></a>
          </div>
                   
          <div class="footer4">
            <h2>FOOTER NOTES</h2>
            (c) 2011 <br />
            <a href="#">Sitemap</a><br />
            Made with <a href="#"><img src="media/img/typo3.png" alt="Typo3" /></a>
          </div>     
          
        </div>

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

.footer {   bottom: 0;   left: 0;   right: 0;   background-color: #1A1A1A;   color: #a9a9a9;   border-top: 8px solid #2F2F2F;   padding: 10px 40px 50px;   font-size: 0.7em;   overflow: hidden;   line-height: 1.5em; } .footer div {   float: left;   padding: 10px; }

Hallo,

ich würde zum Zentrieren innerhalb des Footer-Blockes einen weiteren Block ("centerDiv") einsetzen. Etwa so:

HTML-Code:

<div class="footer">

  <div class="centerDiv">

    <div class="footer1">
      <h2>KONTAKT</h2>
      <a href="#">info(at)bla.de</a><br />
      <a href="#"><img src="media/img/xing.png" alt="Xing" /></a><br />
      <a href="#"><img src="media/img/linkedin.png" alt="LinkedIn" /></a>
    </div>

    <div class="footer2">
      <h2>W3C</h2>
      <a href="http://validator.w3.org/check?uri=referer">
        <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" />
      </a>
      <a href="http://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="CSS ist valide!" />
      </a>
    </div>

    <div class="footer3">
      <h2>Language / Sprache</h2>
      <a href="#"><img src="media/img/germany.png" alt="German" height="20" /></a>
      <a href="#"><img src="media/img/uk.png" height="20" alt="English" /></a>
    </div>

    <div class="footer4">
      <h2>FOOTER NOTES</h2>
      (c) 2011 <br />
      <a href="#">Sitemap</a><br />
      Made with <a href="#"><img src="media/img/typo3.png" alt="Typo3" /></a>
    </div>

  </div>

</div>

Dann könntest du so formatieren:

Code css:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

.footer {   float: left;   width: 100%;   background-color: #1A1A1A;   color: #a9a9a9;   border-top: 8px solid #2F2F2F;   padding: 10px 0 50px;   font-size: 0.7em;   overflow: hidden;   line-height: 1.5em; } .centerDiv {   float: left;   position: relative;   left: 50%; } .centerDiv div {   float: left;   position: relative;   right: 50%;   padding: 10px; }

Diese Methode wird hier sehr gut beschrieben: Horizontally Centered Menus with no CSS hacks