Martin W: Floating + Clear im IE

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

  1. Floating + Clear im IE

    Gunther
    – Informationen zu den Bewertungsregeln

    Hallo!

    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.

    Ohne zusätzliches Markup (Clearer-Div) dürfte schwer werden. Das ist ein "klassisches" Problem aller bisherigen IE-Versionen (einschl. 7).

    Eine mögliche Lösung für dein Problem findest du im Weblog-Artikel: Grundlagen für Spaltenlayout mit CSS von molily.

    Gruß Gunther

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Floating + Clear im IE

      Martin W
      – Informationen zu den Bewertungsregeln

      Hi,

      danke für die Info und den Link.
      So hatte ich das noch nicht probiert.

      Ich habe bisher immer versucht die Element der 2. Zeile in einen DIV Container zu geben, was mir aber nicht gefallen hatte.

      Einen leeren DIV als Separator einzufügen hatte ich noch nicht probiert, aber das funktioniert und gefällt mir auch besser.

      Herzlichen Dank!

      • Martin
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln