DIV: Höhe soll sich automatisch anderen DIV anpassen

OnTheRun · #1 (**permalink**) 24.09.2006, 19:50

Hallo allerseits,
ich habe folgendes Problem mit einem CSS-Layout:

Anschauen könnt ihr euch das Problem hier:
Seite: http://www.quarz.cc/TEST/
CSS: http://www.quarz.cc/TEST/main.css

Ich hätte gerne, dass sich die Höhe des DIV-Tags "container" (weiss) dem höchsten darin enthaltenen Element anpasst. In diesem Falle wäre dies das DIV "content".
Dem DIV "bottom_right" habe ich als height-attribut 100% zugewiesen und hätte erwartet, dass es sich dem container-tag anpasst, da es ja von diesem umschlossen wird, doch dies scheint nicht der Fall zu sein.
Sind meine "Anforderungen" überhaupt möglich? Falls ja, wie erreiche ich das oben Gewünschte?

Gruss und Vielen Dank

dr4g0n · #2 (**permalink**) 25.09.2006, 00:22

steht in den faq im css bereich !

Siegfried · #3 (**permalink**) 25.09.2006, 10:34

Hi,

das problem hierbei ist das float, das nimmt den so formatierten Container aus dem Textfluss heraus. Damit hat der umgebende Container eine Höhe von Null, da er ja Nichts mehr enthält.

Das ist allerdings ein etwas kniffliges Problem. Du könntest beispielsweise einen weiteren Container unten drunter positionieren, ohne float, aber mit clear:both. Allerdings würde dieser Hilfscontainer, der ja keinen Inhalt hat, dem "semantic markup" widersprechen. Möglicherweise kannst Du auch den umgebenden Contaier ebenfalls floaten. Habe ich allerdings noch nie gemacht und bin daher auf das angewiesen, was ich irgendwo aufgeschnappt habe

Boris · #4 (**permalink**) 25.09.2006, 12:48

Steht auch alles im FAQ ...

Siegfried · #5 (**permalink**) 25.09.2006, 13:35

Zitat:

Zitat von Boris

Steht auch alles im FAQ ...

Ganz bestimmt. Nur ist es für Neulinge leichter, wenn sie die Antwort direkt bekommen, anstatt erst lange in der FAQ suchen zu müssen.

Boris · #6 (**permalink**) 25.09.2006, 15:08

Nun rate mal, wozu das FAQ bei uns hier eingerichtet wurde?

Siegfried · #7 (**permalink**) 25.09.2006, 15:40

...um Diejenigen, die schon länger hier im Forum sind, und die wissen, wo hier was gesucht werden muß, mit den nötigen Informationen zu versorgen?

Boris · #8 (**permalink**) 25.09.2006, 15:56

... oder um nicht ständig auf die gleichen Fragen antworten zu müssen?

OnTheRun · #9 (**permalink**) 25.09.2006, 18:35

Hallo,
vielen Dank für eure Antworten

EDIT2: Ok, ich habe nun durch Weglassen des height-Attributes bei container und container-right, so wie der Verwendung von min-height das gewünschte Resultat erhalten. Nun fehlt nur noch eines und zwar, dass sich middle_right_02 container_right anpasst.
Dies tut es aber nicht. Container_right sieht wie folgt aus:

Code:

#container_right {
	background-color: #00FF00;
	
	width: 624px;
	min-height: 400px;
	
	float: left;
}

somit passt er sich content an. Middle_right_02 sieht so aus:

Code:

#middle_right_02 {
	background-color: #006666;
	
	width: 200px;
	height: 100%;
	
	float: right;
}

dieser sollte sich ja nun eigentlich der Höhe von container_right (welche ja nach content variiert) anpassen oder liege ich hier falsch?

EDIT: Ich bin noch auf ein weiteres Problem gestossen: Ich habe content mal eine Höhe von 800px zugwiesen, somit ist er grösser als container. Dies wäre ok, nur sollte sich container ausdehnen und somit gleichhoch werden wie content (oben genanntes Problem). Das zweite Problem ist, dass wenn ich container_right keine Höhe gebe, dehnt er sich und passt sich der Höhe von content an. Dies ist ok so.
Nun hätte ich aber gerne dass middle_right_02 (content, middle_right_01 und middle_right_02 liegen alle in container_right) sich dem container_right anpasst (und somit content). Ich habe dies per height: 100% versucht, doch dies nützt nichts, da ja der übergeordnete Container (container_right) keine Höhenangabe hat und sich der Höhe von content anpasst. Somit ist middle_right_02 so hoch wie sein Inhalt (momentan &nbsp

. Er sollte sich aber per height 100% dem übergeordneten Container in der Höhe (und somit content) anpassen. Wie bewerkstellige ich dies?

Ich habe vorher (recht ausgiebig) bei Google und hier im Forum (wenig ausgiebig

) gesucht und bin auf die im FAQ genannte Seite schon gestossen. Ich habe dies mit dem clearfix bereits probiert, leider ohne Erfolg.
Im besagten Artikel wird ja auch beschrieben, dass die "alte" Variante ein

Code:

<div style="clear: both;"></div>

ist. Dies hat bei mir jedoch auch nichts genützt.
Ich habe heute ein wenig daran rumgebastelt und das Layout sieht nun so aus:

Seite: http://www.quarz.cc/TEST/
CSS: http://www.quarz.cc/TEST/main.css

Was ich nicht ganz verstehe ist Folgendes:

Ich habe beispielsweise jetzt einen zusätzlichen Container (container_right) eingebaut. Dieser hat height 100%. Firefox interpretiert dies korrekt und macht mir eine Höhe von 768px daraus, da der übergeordnete Container (container) eine solche Höhe besitzt. Was mich allerdings stört ist, dass container_right über den Rand von container herausragt. Ich hätte gern, dass die Höhe von container_right im Prinzip 100%(768px) - top3.height (200px) beträgt, dann wäre das wiederum korrekt. Die andere Lösung wäre eben, wie schon erwähnt der Clearfix. IE 6 macht (fälschlicherweise) das von mir gewünschte Ergebnis, er stretcht container auf die Gesamthöhe (container_right + top3), also 968px. Wie kriege ich dies hin?
Ich habe es wie gesagt mit clearfix und clear: both probiert:

Code:

<div id="container">
		<div id="top1">&nbsp;</div>
		<div id="top2">&nbsp;</div>
		<div id="top3">&nbsp;</div>
		<div id="menu">&nbsp;</div>
		<div id="container_right">
			<div id="content">&nbsp;</div>
			<div id="middle_right_01">&nbsp;</div>
			<div id="middle_right_02">&nbsp;</div>
		</div>
		<div id="bottom_left">&nbsp;</div>
		<div id="bottom_right">&nbsp;</div>
		<div style="clear: both">&nbsp;</div>
	</div>

bzw.

Code:

<div id="container" class="clearfix">
		<div id="top1">&nbsp;</div>
		<div id="top2">&nbsp;</div>
		<div id="top3">&nbsp;</div>
		<div id="menu">&nbsp;</div>
		<div id="container_right">
			<div id="content">&nbsp;</div>
			<div id="middle_right_01">&nbsp;</div>
			<div id="middle_right_02">&nbsp;</div>
		</div>
		<div id="bottom_left">&nbsp;</div>
		<div id="bottom_right">&nbsp;</div>
	</div>

und im CSS:

Code:

<style>
.clearfix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}
  
 .clearfix {
display: inline-block;
}  

/* Holly Hack Targets IE Win only \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End Holly Hack */
</style>

Hat jemand eine Idee, wo mein (Denk-)Fehler liegt?

Vielen Dank und Gruss

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Brauche Hilfe: Schwarzes Nichts	Zwox	CSS	10	19.11.2010 16:53
IE soll width von div bei übergroßem inhalt NICHT automatisch anpassen. Wie?	*vivian	CSS	4	15.09.2008 00:42
Div in der Höhe anpassen	cb01	CSS	2	15.03.2007 03:41
div höhe anpassen	Dgx	CSS	3	02.03.2007 18:02
DIV Länge automatisch anpassen	judicious	CSS	10	08.05.2006 16:30