Die Nutzung von Div-Layer im Kombination mit Float wird heuzutage von W3C als gewünschte Maßnahme gesehen und ersetzt hiermit die alten align Parameter, die jetzt nicht mehr von allen Browsern akzeptiert werden. Sehr oft möchte man Elemente programmieren, die per Float nach links oder rechts aligniert werden, den übergeordneten Container auf ihre Höhe spannen. Und hier entsteht das Problem, dass wir heute betrachten:
Problematik
Die floating Divs spannen nicht ihre Container-Divs, das heißt dass der Container sich einfach nicht auf die Höhe der darunter liegenen floating divs spannt, was ein deutlicher Bruch in Ihrem Webdesign-Layout ist, insbesondere wenn Sie dem Container eine kachelnde Grafik programmiert haben. Wenn Sie beispielsweise ein Border auf dem äußeren Container-Div programmieren, der floating Elemente/Divs enthält, dann sehen Sie nun eine 2 pixel Linie über dem Inhalt der floating Div-Layers. Auch wenn Sie dem Container-Div feste Breite und Höhe programmieren, spannt er sich nicht.
Ihr Code würde so aussehen:
div.container {
border: 1px solid #000000;
}
div.links {
float: left;
}
div.rechts {
float: right;
}
und Ihr HTML:
<div class="container">
<div class="links">Mein Text Links</div>
<div class="rechts">Mein Text Rechts</div>
</div>
Hier stehen die beiden floating Divs “in der Luft” unter dem Container-Div. Das ist schließt jegliche Gestaltungsmöglichkeiten für den Container aus.
Lösung 1
Die Lösung, mit der man bisher leben musste, ist in dem Container ein weiteres “nicht-floating” Element zu programmieren, der die bestimmte Style-Eigenschaft “clear:both” haben muss:
<div class="container">
<div class="links">Mein Text Links</div>
<div class="rechts">Mein Text Rechts</div>
<div style="clear:both;"></div>
</div>
Jedoch ist das unnötige Hinzufügen von Elementen mit leerem Inhalt keine gute Praxis. Es gibt eine wesentlich einfachere und bessere Lösung:
Lösung 2
Die einfachere und bessere Programmierlösung für dieses Problem ist dem Container-Div per CSS diese zusätzlichen Eigenschaften zu vergeben:
div.container {
border: 1px solid #000000;
overflow: auto;
width: 100%;
}
div.links {
float: left;
}
div.rechts {
float: right;
}
Um sicherzugehen, haben wir hier nebst overflow:auto; auch width: 100% hinzugefügt. Das wird von den meisten Browser erfordert, damit overflow überhaupt in Kraft treten kann. Bei Safari könnten Sie overflow: hidden; nehmen, um unnötige Scrollbalken zu vermeiden. overflow: none; ist der einzige Wert für overflow, mit dem man dieses Ergebnis nicht hinbekommen kann.
