DerNils: Verschachtelte Floats im IE - Priorität änderbar?

Beitrag lesen

SELF-Forum

Verschachtelte Floats im IE - Priorität änderbar?

DerNils
– Informationen zu den Bewertungsregeln

Hallo zusammen,

ich hab da mal ein sehr konkretes Problem. Auf meiner Seite habe ich Container-Divs die mehrere Inhalt-DIVs beinhalten sollen.
Es sollen sowohl die Container, als auch die Inhalte mit float:left "floaten". Das funktioniert auch wunderbar. Ich habe keine (und darf auch nicht) festen Größenangaben für die Elemente. Es gilt lediglich, dass die Inhalt-DIVs alle gleich groß sind.

In meinem Beispiel habe ich 2 Container-DIVs mit jeweils 2 Inhalts-DIVs. Nun verändere ich die Fenstergröße. Die Containerelemente springen entsprechend des vorhandenen Platzes um. Wird das Fenster sehr schmal, brechen auch innerhalb eines Containers die Inhalts-DIVs jeweils um. So weit so gut.
Wenn ich nun allerdings das Fenster bis zu der Größe bringe, dass 3 Inhalts-DIVs in eine zeile passen, passieren in den Brwosern unterschiedliche Dinge.

Im IE (7 und 8) habe ich nun folgendes Verhalten:

|--------------|  |--------|
|              |  |        |
|  |--|  |--|  |  |  |--|  |
|  |I1|  |I2|  |  |  |I1|  |
|  |--|  |--|  |  |  |--|  |
|              |  |        |
|--------------|  |  |--|  |
                  |  |I2|  |
                  |  |--|  |
                  |        |
                  |--------|

Mozilla, Chrome & Safari blenden den 2. Container erst in die obere Zeile um, wenn beide Inhaltselemente dort Platz finden. Sieht also wie folgt aus:

|--------------|
|              |
|  |--|  |--|  |
|  |I1|  |I2|  |
|  |--|  |--|  |

|--------------|
|              |
|  |--|  |--|  |
|  |I1|  |I2|  |
|  |--|  |--|  |

Fenster wird größer (bis alle 4 Inhalts-DIVs in eine Zeile passen):

|--------------|  |--------------|
|              |  |              |
|  |--|  |--|  |  |  |--|  |--|  |
|  |I1|  |I2|  |  |  |I1|  |I2|  |
|  |--|  |--|  |  |  |--|  |--|  |
|              |  |              |
|--------------|  |--------------|

Wie bekomme ich nun im IE eben dieses zuletzt beschriebene Verhalten hin? Kann man irgendwie die Priorität des "äußeren Floats" heraufsetzen, á la !important ? Mir gehen langsam die Ideen aus, und ich möchte ungern zu einen Tabellenlayout zurückkehren.

Vereinfachter Quellcode zum nachvollziehen:

<html>
<head>
<title>display</title>
<style type="text/css">
.containerDiv { float: left;
border: solid 1px gray;}
.inhaltsDiv { float: left; }
</style>
</head>

<body>
<div class="containerDiv">
<div class="inhaltsDiv">
<span>&nbsp;I1 - Für ein bisschen mehr Breite&nbsp;</span>
</div>
<div class="inhaltsDiv">
<span>&nbsp;I2 - Für ein bisschen mehr Breite&nbsp;</span>
</div>
</div>

<div class="containerDiv">
<div class="inhaltsDiv">
<span>&nbsp;I1 - Für ein bisschen mehr Breite&nbsp;</span>
</div>
<div class="inhaltsDiv">
<span>&nbsp;I2 - Für ein bisschen mehr Breite&nbsp;</span>
</div>
</div>
</body>
</html>

Dank im voraus.

Beitrag melden
–
Informationen zu den Bewertungsregeln