XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   DIV: Höhe soll sich automatisch anderen DIV anpassen (http://xhtmlforum.de/showthread.php?t=42080)

OnTheRun 24.09.2006 20:50

DIV: Höhe soll sich automatisch anderen DIV anpassen
 
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 25.09.2006 01:22

steht in den faq im css bereich !

Siegfried 25.09.2006 11: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 25.09.2006 13:48

Steht auch alles im FAQ ...

Siegfried 25.09.2006 14: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 25.09.2006 16:08

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

Siegfried 25.09.2006 16: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 25.09.2006 16:56

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

OnTheRun 25.09.2006 19: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  ). 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


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:51 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023