Zuletzt aktualisiert am 25. Dezember 2023 von Lars
Dieser Artikel eine Zusammenfassung der Probleme, über die man bei der Positionierung mit DIVs im CSS stösst.
In den folgenden Beispielen sind DIVs mit einem Rahmen versehen, dass erlaubt eine bessere Beurteilung Ihres Verhaltens. Dies empfiehlt sich beim Debuggen generell.
Fangen wir mal direkt mit einem Beispiel an:
<!DOCTYPE html> <html lang='de'> <head> <title>CSS</title> <meta charset='utf-8' /> <style> .outerdiv { width: 600px; margin: auto; border: 2px solid grey; } .innerdiv { width: 150px; float: left; border: 1px solid red; display: block; } .floatbreaker { clear: both; } </style> </head> <body> <h1>CSS-Display-Krempel</h1> <div class='outerdiv'> <div class='innerdiv'> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p> </div> <div class='innerdiv'> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> <div class='innerdiv'> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p> </div> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> </div> </body> </html>
Das ist nicht ganz, was wir erwarten. Unschön ist zum einen Mal dass der vierte Text nich in einer neuen Zeile erscheint, was wir beim Layouten sicher erwartet haben. Grund ist, dass wir zwar dem äusseren DIV kein float zugewiesen haben, dieser aber quasi von den vorherigen übernommen wird.
Hier hilft der sog. Floatbreaker. Ich packe den i. d. R. immer in eine Klasse mit gleichemm Namen. Die CSS-Definition sieht so aus:
.floatbreaker { clear: both; }
Er muss dann z.B. in einem DIV gesetzt werden, wenn der Fluss unterbrochen werden soll. Wir ändern also den obigen Code so ab:
: : invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p> </div> <div class='floatbreaker'> </div> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. sed diam nonumy eirmod tempor invidunt : :
Gratulation! So haben wir uns das (hoffentlich vorgestellt).
Äussere DIVs an innere anpassen
Zurück zum Eingangsbeispiel. Das innere DIV mit dem längsten Text "läuft" aus dem äusseren Raus. Damit hat man als Einsteiger oft zu kämpfen.
Wenn ich will, dass sich das äussere DIV wie eine Tabelle verhält, also so gross wird, wie alle inner DIVs, dann empfiehlts sich ein "display:table" zu setzen.
.outerdiv { width: 600px; margin: auto; border: 2px solid grey; display: table; }
Alle DIVs gleich hoch
Um nun alle DIVs gleich hoch zu erstellen, empfiehlt sich eine Methode, die Markus René Einicher im Artikel Floatende Divs gleich hoch machen beschreibt. Die inneren DIVs werden dabei extrem lang gemacht und das äussere DIV via "overflow: hidden" angewiessen, alles was "überlappt", abzuschneiden.
Ein Text ohne inneres DIV wie im obigen Beispiel, würde uns da aber grosses Kopfzerbrechen bereiten. Der Text würde trotzdem in die anderen DIVs fliesen. Abhilfe schafft hier dann nur, auch den hintersten Text in ein DIV zu packen.
So also das Ergebnis nach der Methode "Einicher":"
Und hier der Code dazu:
<title>CSS</title> <meta charset="utf-8" /> <style> .outerdiv { width: 600px; margin: auto; border: 2px solid grey; overflow: hidden; } .innerdiv { width: 150px; float: left; border: 1px solid red; padding-bottom: 32768px; margin-bottom: -32768px; } </style> </head> <body> <h1>CSS-Display-Krempel</h1> <div class="outerdiv"> <div class="innerdiv"> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p> </div> <div class="innerdiv"> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> <div class="innerdiv"> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p> </div> </div> </body> </html>
Hallo, hier schreibt Lars. Dipl-Ing. Ingenieurinformatik (FH). Seit Jahrzehnten in der IT tätig. Geprüfter (und begeisterter) Webmaster. Ebenso begeisterter Windows-, Apple-, und Office-User. Ich schreibe über alle möglichen Themen rund um IT. Mehr über mich erfährst du hier: Über mich. Danke für deinen Besuch!