div Mitwachs-Problem

dodlhuat

Mitglied
Hallo,

ich habe mal wieder das gerne auftretende div-wächst-nicht-mit Problem, finde nur leider den Fehler nicht.
Wahrscheinlich bin ich nur blind, aber wenn es sich vielleicht wer kurz ansieht, fällt der Fehler gleich auf und ich kann ihn beheben :)
Also, folgenden HTML Code habe ich:
HTML:
<div id="center_wrapper">
  <div id="content_wrapper">
    <div id="content_bg_color_wrapper">
      <div id="content_bg_color_test">
        
      </div>
    </div>
  </div>
</div>
und dazu folgendes CSS
HTML:
#center_wrapper {
	margin-left:auto;
	margin-right:auto;
	width:890px;
	height:100%;
	min-height:100%;
}

#content_wrapper {
	width:890px;
	height:100%;
	background-color:#FFFFFF;
}

#content_bg_color_wrapper {
	/* da war mal was drinnen, hab dann das div aber nicht gelöscht nachdem ich den Inhalt entfernt habe */
}

#content_bg_color_test {
	width:390px;
	min-height:320px;
	background-color:#f9b931;
	position:relative;
	left:110px;
	top:0px;
	color:#FFFFFF;
}

habe bereits nach jedem div ein .clear probiert, das hat aber leider nichts geholfen. Kanns vielleicht an der relativen Positionierung liegen?
Danke schonmal im vorraus.
 
Ok, die Lösung ist, das der #content_wrapper keine height sondern eine min-height gebraucht hat. Wie schon angenommen wars ganz einfach :)
 
Aber Achtung: Für den Internet Explorer gehts nicht mit min-height :D

Füge für den IE folgendes ein:
Code:
* html #content-wrapper {
   height: 100%;
}

Jeder andere Browser außer dem IE 6 übersieht diese Anweisung wegen dem * (das * steht für übergeordnete Elemente, es gibt aber keine übergeordneten Elemente über html... IE sieht das anders)
 
Css-hacks sollten mit Möglichkeit vermieden werden da sie auf dem Fehlverhalten eines Browsers basieren und daher (theoretisch) mit jedem update verschwinden können.
Dass diese Warscheinlichkeit gerade beim ie6 nicht hoch ist ist mir klar ;-)

Gerade der IE bietet eine Möglichkeit, ganz ohne Hacks, code einzubinden den nur er Interpretiert:
http://de.wikipedia.org/wiki/Conditional_Comments
 
Zurück