✔ Parent Div wächst bei floating Childs nicht mit (IE6)

GartenUmgraben · 5. November 2008

Folgende Seite, besteht aus einem Parent-Div sowie 3 Child-Divs, die wiederum der Anordnung wegen floaten. Während in IE/ und Firefox der Parent-Div ensprechend der Höhe des mittleren Divs vergrößert wird, tut er dies im IE6 nicht und der mittle Div ragt über die Grenzen hinaus..weiss jmd wie ich das (am besten ohne Hacks und Umstellung auf Tabellen) umgehen kann?

Gruß
Gärtner

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN">
<HTML>
  <HEAD>
    <TITLE>Dokument Titel</TITLE>
    <LINK REL="STYLESHEET" TYPE="text/css" 
      HREF="http://imported.com/blues.css" TITLE="Blues">
    <STYLE TYPE="text/css">
      div.body
	  {
	    background-color:gray;
	    border:2px solid blue;
		overflow: auto;
	  }
	  div.left
	  {
	    background-color:red;
		float:left;
	  }
	  div.middle
	  {
	    background-color:yellow;
		float:left;
	  }
	  div.right
	  {
	    background-color:green;
		float:rigth;
	  }
    </STYLE>
  </HEAD>
  <BODY>
	<div class="body">
		<div class="left">left</div>
		<div class="middle">middle<br/>it is</div>
		<div class="right">right</div>
	</div>  
  </BODY>
</HTML>

Maik · 6. November 2008

Hi,

Webmaster FAQ -> CSS Warum passt sich die Boxenhöhe nicht dem Inhalt an?

CSS:

.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}

.clearfix {display:inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */

Code:

<div class="body clearfix"> ... </div>

mfg Maik

✔ Parent Div wächst bei floating Childs nicht mit (IE6)

GartenUmgraben

Erfahrenes Mitglied

Maik

Neue Beiträge