<div id="eins">ID eins</div>
<div id="zwei">ID zwei </div>
#eins {
width:200px;
height:100px;
background:#ccc;
}
#zwei {
width:300px;
height:150px;
background:#777;
}
Das hellgraue Div hat float:left
zugewiesen bekommen – Das zweite, dunkelgraue Div rutscht dahinter.
#eins {
width:200px;
height:100px;
background:#ccc;
float:left;
}
#zwei {
width:300px;
height:150px;
background:#777;
}
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.
#eins {
width:200px;
height:100px;
background:#ccc;
float:left;
}
#zwei {
width:300px;
height:150px;
background:#777;
float:left;
}
clear: …
Soll ein Div unter gefloateten Elementen platziert werden, muss das Floating per clear:left/right/both
aufgehoben werden.
#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 */
}
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:
<div id="umgebendes-div">
<div id="eins">ID eins</div>
<div id="zwei">ID zwei </div>
</div>
overflow:hidden
:
#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;
}
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:
#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;
}