✔ Der IE und das Floating...

[Layna]

Hallo.
Ich war am Designen und bin auf ein interessantes (und sehr nerviges...) Problem gestossen.

Erst einmal der Code:

<div id="outer">
	<div id="left">
		Hier ist eine Box.
	</div>
	<div id="main">
		<div id="floater">Und dies hier floatet.</div>   
		Dies ist ein test<br /><br /><br />
		mehrzeilig!      
		
		<div style="clear: both;"></div>
	</div>
</div>

#outer {
	margin: 10px;
	background-color: black;
}


#left{
	width: 120px;
	background-color: Aqua;
	float: left;
}

#main {
	margin-left: 130px;
	background-color: green;
}

#main #floater {
	float: right;
	width: 40%;
	height: 300px;
	background-color: blue;
}

Wenn ich "<div style="clear: both;"></div>" drinne habe wird #main brav auf nötige Höhe gestreckt um #floater aufzunehmen (Bild 1).
Der IE hingegen... nun ja, der TEXT bleibt wo der ist, der HINTERGUND wächst fröhlich über alle Grenzen hinaus (Bild 2). Das der IE sich merkwürdig verhalten kann ist ja bekannt, aber DIESES verhalten wiederspricht allem was ich bisher geglaubt habe über DIV's zu wissen.
Ich würde nun ganz gerne das Verhalten des Firefox auf im IE sehen... bin dankbar für jeden Tipp wie ich das hinbekomme.

 

[Maik]

Hi,

nimm mal nach dem #main-Selektor folgende Regel für den IE auf, um der Box eine geringe Höhe zu geben:

* html #main {
height: 1%;
}

 

[Layna]

Ändert leider gar nichts am Verhalten.
Ich habe mal spasseshalber dem clearenden div einen Rahmen verpasst... der Gesamte INHALT von #main verhält sich im IE wie der soll, nur der Hintergrund fliesst aus unerfindlichen Gründen über...
*seufz* In diesen Moment kann ich nur immer meine Signatur ansehen und mich erinnern dass sie stimmt....

 

[Maik]

Hm, bei mir verhält sich der IE ganz artig:

 

[Layna]

Ok.... hast du den IE6 oder den IE7?
Im 7'er zeigt er nämlich stur das oben gezeigte verhalten...
Hmm... *mal weiter testet...*

 

[Maik]

Okay, wenn das Dokument im Standardsmode übergeben wird, kann der IE7 mit dem "Star-HTML-Hack" nichts anfangen

Binde daher die empfohlene Ergänzung mit einem "Conditional Comment" ein:

<style type="text/css">
<!--
#outer {
        margin: 10px;
        background-color: black;
}

#left{
        width: 120px;
        background-color: Aqua;
        float: left;
}

#main {
        margin-left: 130px;
        background-color: green;
}


#main #floater {
        float: right;
        width: 40%;
        height: 300px;
        background-color: blue;
}
-->
</style>
<!--[if lte IE 7]>
<style type="text/css">
#main {
height: 1%;
}
</style>
<![endif]-->

 

[Layna]

Stimmt, jetzt tut auch der 7'er was er tun soll .
Danke . So unbedingt logisch ist das Verhalten ohne das 1% zwar nicht.... aber es ist eben der IE .
Vielen Dank .