IE(6): DIVs sind in der Größe voneinander abhängig?

Wilde

Grünschnabel
Hallo zusammen,

ich habe ein DIV in welchem sich zwei weitere DIVs (mit float) befinden. Die beiden inneren DIVs haben eine größere height als das äußere DIV.
Nun werden meiner Meinung nach alle drei DIVs im FF richtig dargestellt. Nur im IE(6) passt sich das äußere DIV an die größe der beiden inneren an.
Nun hätte ich gerne einen Workaround für den IE(6), so dass dieser die angegebene Größe des äußeren DIVs behält und sich nicht automatisch anpasst.

Hier ist der Code:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
	<style type="text/css">
		div#top {
			height: 100px;
			border: solid 1px red;
		}

		div#container1, div#container2 {
			height: 150px; 
			width: 100px; 
			float: left;
			border: solid 1px blue;
		}
	</style>
</head>

<body>
	<div id="top">	
		<div id="container1">
			<div>DIV1</div>					
		</div>
		<div id="container2">
			<div>DIV2</div>					
		</div>
	</div>
</body>
</html>

Über einen Hinweis würde ich mich freuen.
Vielen Dank im Voraus!
 
Hallo,

ich würde um die gefloateten DIV-Blöcke einen "wrapper"-Block legen, der im DIV#top-Block absolut positioniert werden kann. Dazu müsste natürlich der DIV#top-Block relativ positioniert werden. Also so:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Test</title>
  <style type="text/css">
    div#top {
      position: relative;
      height: 100px;
      border: solid 1px red;
    }
    div#wrapper {
      position: absolute;
      top: 0;
      left: 0;
    }
    div#container1, div#container2 {
      height: 150px;
      width: 100px;
      float: left;
      border: solid 1px blue;
    }
  </style>
</head>

<body>
  <div id="top">
    <div id="wrapper">
      <div id="container1">DIV1</div>
      <div id="container2">DIV2</div>
    </div>
  </div>
</body>
</html>
 
Moin,
ich habe ein DIV in welchem sich zwei weitere DIVs (mit float) befinden. Die beiden inneren DIVs haben eine größere height als das äußere DIV.
Nun werden meiner Meinung nach alle drei DIVs im FF richtig dargestellt.

Die deiner Meinung nach "korrekte" Darstellung im Firefox und allen anderen standardkonformen Browsern beruht zum einen darauf, dass sie die height:100px-Deklaration für #top gemäß der CSS-Spezifikation als absolute Höhe interpretieren, und nicht wie der IE6 als "Mindesthöhe", und zum anderen du das Umfliessen der beiden Boxen anschliessend nicht mittels der clear-Eigenschaft beendet hast, um so wieder den normalen Textfluß im Dokument herzustellen.

Letzteres ist nämlich ein beliebtes Thema hier im CSS-Board, dem ich einen "Webmaster FAQ"-Artikel gegönnt habe:


Wie du den IE6 zu dieser Darstellung zwingst, hat dir hela ja vorgestellt.

mfg Maik
 
Hallo hela und Maik,

vielen Dank für die Lösung des DIV-Problems!
Habe es gleich ausprobiert und es hat geklappt. :p

Viele Grüße
Wilde
 
Zurück