Breiten- und Höhenangaben und Stolperfallen

Beispiel 1 – Keine Angaben für Breite und Höhe

Wenn keine Breite oder Höhe (width bzw. height) definiert wird:
Ein Div oder ein anderes Blockelement nimmt immer die Breite ein, die ihm zur Verfügung steht.
Die Höhe wird durch den Inhalt (hier dieser Text) bestimmt.

CSS


.grau {
	background:#ccc;		/* kein Wert für width und height! */
	} 	
			

Beispiel 2 – Zwei Divs ineinander verschachtelt

Hier liegt in dem gleichen grauen Div ein gelbes Div mit einer Breite von 400px und einer Höhe von 100px.
Das umliegende graue Div (weiterhin keine Breiten- oder Höhenangabe) dehnt sich jetzt automatisch in der Höhe aus.

CSS


.grau {
	background:#ccc;		/* kein Wert für width und height! */
	}
	
.gelb {
	background:#ff7;
	width:400px;
	height:100px;
	}
			

Beispiel 3 – Keine Angaben für Breite und Höhe

Das Gleiche hier nochmal:
Nun ist hier allerdings soviel Text, dass die Größe des Divs nicht mehr ausreicht –
der Text geht über das Div hinaus.
Zuviel Text
Zuviel Text
Zuviel Text

CSS


.grau {
	background:#ccc;		/* kein Wert für width und height! */
	}
	
.gelb {
	background:#ff7;
	width:400px;
	height:100px;
	}
			

Beispiel 4 – Breite/Höhe bei innerem Div höher als bei äußerem

Das gelbe Div ist mit 400x100px höher als das umgebende grüne Div mit 500x70px – es geht über das grüne Div hinaus.

CSS


.gruen {		/* äußeres Div */
	background:#3a3;
	width:500px;
	height:70px; 
	}
	
.gelb {			/* inneres Div */
	background:#ff7;
	width:400px;
	height:100px;
	}
			

Beispiel 5 – wie Beispiel 4 + Padding bei äußerem Div (width: 20+500+20 = 540px)

Jetzt hat das grüne Div auch noch einen Innenabstand (padding) von 20px bekommen – das grüne Div wird zu jeder Seite um 20px breiter (Boxmodell)

CSS


.gruen {		/* äußeres Div */
	background:#3a3;
	width:500px;
	height:70px;
	padding:20px;
	}
	
.gelb {			/* inneres Div */
	background:#ff7;
	width:400px;
	height:100px;
	}