HTML / CSS: Positionierung mit DIVs und der Kampf mit Display und Co.

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>

Positionierung mit DIVs und der Kampf mit Display und Co.

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 
			:
			:
Positionierung mit DIVs und der Kampf mit Display und Co.

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;
} 
Positionierung mit DIVs und der Kampf mit Display und Co.

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

Positionierung mit DIVs und der Kampf mit Display und Co.

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>
Du willst meine Arbeit unterstützen? Dann freue ich mich über eine kleine Spende!

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert