Martin W: Floating + Clear im IE

Beitrag lesen

SELF-Forum

Floating + Clear im IE

Martin W
– Informationen zu den Bewertungsregeln

Hallo,

ich habe ein mittleres Problem mit "float" und "clear" im IE.
Hier mal der Code.

  
<html>  
<head>  
<style type="text/css">  
div {  
 border: 1px solid blue;  
}  
.x1 {  
 height: 300px;  
 width: 300px;  
}  
  
.x2,  
.x3 {  
 height: 30px;  
 width: 30px;  
 float: left;  
}  
  
.e1 {  
 clear: both;  
}  
  
.e1 {  
  background-color: #111;  
}  
.e2 {  
  background-color: #333;  
}  
.e3 {  
  background-color: #555;  
}  
.e4 {  
  background-color: #777;  
}  
  
</style>  
</head>  
<body>  
  
<div class="x1">  
  
<div class="x2 e1"></div>  
<div class="x2 e2"></div>  
<div class="x2 e3"></div>  
<div class="x2 e4"></div>  
  
<div class="x3 e1"></div>  
<div class="x3 e2"></div>  
<div class="x3 e3"></div>  
<div class="x3 e4"></div>  
  
</div>  
</body>

Wenn man sich das ganze jetzt im Firefox anschaut, dann sieht das so aus, wie ich es mit vorstelle.
Im IE hat das "clear" irgendwie keine Auswirkung auf die folgenden Elemente.

Wie kann ich es schaffen, dass der IE diese Konstrukt so darstellt wie der Firefox? Habe ich etwas mit dem "clear" und "float" falsch verstanden?
Wenn möglich möchte ich an der HTML Struktur nichts ändern müssen, sondern die Darstellung nur über die CSS steuern.

Danke!

  • Martin
Beitrag melden
–
Informationen zu den Bewertungsregeln