div float bot­tom — es geht doch!

Ok … etwas gelo­gen ist die Über­schrift dann schon. Direkt ein float: bot­tom; ist ein­fach durch die Spezifikationen nicht gege­ben Auch eine Google-Anfrag nach div float bot­tom bringt nicht immer das gewünschte Ergebnis. Aber einen klei­nen Workaround gibt’s jetzt…

Manchmal ist es doch ein­fach zum ver­rückt wer­den. Da bie­tet CSS 2 schon viele schöne Features, aber die schein­bar tri­via­len Dinge sind nicht mit dabei. Beispiel: float bot­tom;.

Szenario: wir wol­len auf einer Seite zwei div-Container so ver­schach­teln, dass der äußere am unte­ren Rand “klebt”. Viele ver­zwei­feln und ver­su­chen das Problem viel­leicht sogar mit JavaScript zu lösen. Dabei gibts einen ein­fa­che­ren Weg, den ich euch jetzt auf­zei­gen will.

Ausgangslage

Wir haben eine Seite mit einem Wrapper, der die Seite kom­plett umschließt: #page_wrapper. Darin sind dann diverse Bereich wie Header, Menü, Sidebar, Hauptbereich und Footer ent­hal­ten. Am Ende des Hauptbereichs (#con­tent) soll ein klei­ner Bereich für Zusatzinformationen (#info; das gewünschte div float bot­tom) plat­ziert werden.

Lösungsansatz für das div float bottom

Dazu schrei­ben wir jetzt fol­gen­den code:

<div id="page_wrapper">
   <div id="content">
      <p>Ich habe viiiiiiiel Inhalt und bin sehr lang</p>

      <div id="info">
         <p>Zusatzinformationen</p>
      </div>
   </div>
</div>

Das ent­spre­chende CSS um das Problem in den Griff zu bekommen:

* {
   padding: 0;
   margin: 0;
}

#page_wrapper {
   width: 980px;
   margin: 0 auto;
}

#content {
   width: 560px;
   height: 300px;
   background-color: #abcdef; /* zur visuellen Darstellung */
   position: relative;        /* (1.) */
}

#info {
   width: 300px;
   height: 50px;
   background-color: #fedcba;
   position: absolute; /* (2.) */
   bottom: 0px;        /* (3.) */
   right: 0px;         /* (4.) */
}

Damit “klebt” der info–div am unte­ren (rech­ten) Rand des con­tent–Container. Wichtig hier­bei ist die Positionierung der Elemente. Das Element, wel­ches das kle­bende ent­hal­ten soll, muss rela­tiv posi­tio­niert wer­den. Das Element, wel­ches nach unten “floa­ten” (div float bot­tom) soll, muss abso­lut am rela­tiv posi­tio­nier­ten Element aus­ge­rich­tet wer­den. Dann kann man natür­lich noch ent­schei­den, in wel­che Richtung es aus­ge­rich­tet wer­den soll.

Probleme (Peekaboo Bug) / Ausblick

Wird keine Höhenangabe der Elemente gemacht, und die äuße­ren Elemente haben kei­nen Inhalt, kann es zu Problemen kom­men. Ein Ansatz wäre die min-height–Anweisung.

Eine Alternative ist, dass man einen Container mit der Eigenschaft clear: all; ein­baut. Das Problem nennt sich auch “Peekaboo Bug” und ist gerade im IE6 anzutreffen.

Peekaboo Bug — Lösung

Man gibt dem Elternelement fol­gen­des CSS mit:

* html #page_wrapper { height: 1%; }

Das sollte es gewe­sen sein