Floating

HTML-Code:



<div id="eins">ID eins</div> 
<div id="zwei">ID zwei </div>

CSS:



#eins { 
	width:200px; 
	height:100px; 
	background:#ccc; 
	} 
		
#zwei { 
	width:300px; 
	height:150px; 
	background:#777; 
	}

01: Kein Floating

ID eins
ID zwei

02: Nur erstes Div gefloatet

Das hellgraue Div hat float:left zugewiesen bekommen – Das zweite, dunkelgraue Div rutscht dahinter.

ID eins
ID zwei

CSS:



#eins { 
	width:200px; 
	height:100px; 
	background:#ccc; 
	float:left;
	} 
		
#zwei { 
	width:300px; 
	height:150px; 
	background:#777; 
	}

03: Beide Divs gefloatet

Beide Divs haben float:left zugewiesen bekommen, sie stehen nun nebeneinander. Sollte das Browserfenster oder ein umgebendes Div schmaler als beide Divs zusammen sein, rutscht das zweite Div herunter.

ID eins
ID zwei
ID eins
ID zwei

CSS:



#eins { 
	width:200px; 
	height:100px; 
	background:#ccc; 
	float:left;
	} 
		
#zwei { 
	width:300px; 
	height:150px; 
	background:#777; 
	float:left;
	}

04: Aufhebung des Floatings mit clear: …

Soll ein Div unter gefloateten Elementen platziert werden, muss das Floating per clear:left/right/both aufgehoben werden.

ID eins (float:left)
ID zwei (float:left)
ID drei (clear:left)

CSS:



#eins { 
	width:200px; 
	height:100px; 
	background:#ccc; 
	float:left;
	} 
		
#zwei { 
	width:300px; 
	height:150px; 
	background:#777; 
	float:left;
	} 
#drei {
	width:300px; 
	height:150px; 
	background: #555; 
	clear:left; 		/* clear:both geht hier auch */
	}

05: Problem bei gefloateten Elementen

Befinden sich zwei gefloatete Divs innerhalb eines anderen Divs, welches nicht gefloatet ist und auch keine Höhe (width) zugewiesen bekommen hat, gehen die gefloateten Divs über das umgebende Div hinaus.
Abhilfe kann man damit schaffen, dass man dem umgebenden div die Eigenschaft overflow:hidden zuweist.
Zu erwarten wäre eigentlich, dass der überstehende Inhalt abgeschnitten wird, das ist allerdings nicht der Fall:

HTML-Code:


<div id="umgebendes-div">
	<div id="eins">ID eins</div> 
	<div id="zwei">ID zwei </div> 		
</div>

Ohne overflow:hidden:

ID eins (float:left)
ID zwei (float:left)

CSS:


			
#umgebendes-div {
	background:#fff; 
	border:1px solid #ccc;
	padding:1em;}

#eins { 
	width:200px; 
	height:100px; 
	background:#ccc; 
	float:left;
	} 
		
#zwei { 
	width:300px; 
	height:150px; 
	background:#777; 
	float:left;
	}

Mit overflow:hidden:

Abhilfe kann man dadurch schaffen, dass man dem umgebenden div die Eigenschaft overflow:hidden zuweist.
Zu erwarten wäre eigentlich, dass der überstehende Inhalt abgeschnitten wird, das ist allerdings nicht der Fall:

ID eins (float:left)
ID zwei (float:left)

CSS:


			
#umgebendes-div {
	background:#fff; 
	border:1px solid #ccc;
	padding:1em;
	overflow:hidden;
	}


#eins { 
	width:200px; 
	height:100px; 
	background:#ccc; 
	float:left;
	} 
		
#zwei { 
	width:300px; 
	height:150px; 
	background:#777; 
	float:left;
	}