✔ DIV - Problem mit Höhe und Verschachtelung

[blubber02]

Hallo Leute. Ich hab ein kleines Problem beim Verschachteln von DIV's und komme einfach nicht auf die Lösung.

Ich habe zwei DIV-Container welche beide ineinander verschachtelt sind.
Der 1. Container soll mir das Hintergrundbild für die Linke-Seite anzeigen und der 2. Container das Hintergrundbild für die rechte Seite. (Aber was diese Container zeigen ist irrelevant)
Wichtig ist zu wissen, dass es zwei ineinander verschachtelte Container gibt.

Diese beiden Container sollen sich wiederum der Höhe aller weiter verschachtelten Container anpassen.

Ein Bild:

Erklärung zum Bild:
Die beiden Verschachtelten Container haben die Farben grün (äußerer Container) und rot (innerer Container).
Der Dynamische Container, an dem sich die anderen beiden Container anpassen sollen besitzt einen schwarzen Rand.
Der HTML-Code:

<div id="main">
  <div id="out1">
  <div id="out2">
    <div id="inner">
      fgfgfg<br>sdsd<br>dsds
    </div>
  </div>
  </div>
</div>

Das linke Bild wurde mit folgendem CSS-Code generiert:

#main {
  width: 300px;
  height: auto;
}

#out1 {
  border: 1px solid #00FF00;
  width: 300px;
  height: auto;
}

#out2 {
  border: 1px solid #FF0000;
  width: 300px;
  height: auto;
}

#inner {
  float: left;
  border: 1px solid;
  width: 200px;
  height: 300px;
}

Das rechte Bild wurde mit folgendem CSS-Code generiert:

#main {
  width: 300px;
  height: auto;
}

#out1 {
  position: absolute;
  border: 1px solid #00FF00;
  width: 300px;
  height: auto;
}

#out2 {
  position: absolute;
  border: 1px solid #FF0000;
  width: 300px;
  height: auto;
}

#inner {
  float: left;
  border: 1px solid;
  width: 200px;
  height: 300px;
}

Also die DIVs mit der ID out1 und out2 sollen beide gleich groß sein und sich in der Höhe an die innere DIV anpassen.

Leider funktioniert keine der beiden Lösungen.
Evtl könnt ihr mir helfen.

Ich hoffe ihr habe das Problem verstanden und könnt helfen, wenn nicht fragt einfach nochmal nach.

LG Andreas

 

[Maik]

Moin,

mit deinem zuerst gezeigten CSS (linkes Bild) hast du zumindest schon mal den richtigen Weg zur praktischen Umsetzung eingeschlagen, denn absolute Positionierungen der DIV-Blöcke sind da hinderlich

Du hast es lediglich versäumt, das rechtsseitige Umfließen der Box #inner (float:left-Regel) im Anschluß mit einer clear-Deklaration abzubrechen, um so im Dokument wieder den normalen Textfluß herzustellen, womit nun in diesem Modell der nachfolgende Problemfall eingetreten ist, der in der Vergangenheit hier im CSS-Board so oft und in allen nur denkbaren Facetten thematisiert wurde, dass ich ihm im April '08 einen "Webmaster FAQ"-Beitrag gewidmet habe:

• Warum passt sich die Boxenhöhe nicht dem Inhalt an?

Die vorgestellte .clearfix-Klasse wird demnach in deinem gezeigten Markup im DIV #out2 implementiert.

Wenn du mal zum Gegenvergleich im ersten Stylesheet die float:left-Regel für #inner herausnimmst, wirst du sehen, dass dieses Konzept vom Grundsatz her tadellos in den Browsern funktioniert

Und beachte hierbei, die derzeitige height:300px-Deklaration für den inneren DIV-Block mit Blick auf die standardkonformen Browser entweder gänzlich zu entfernen, oder in eine Mindesthöhe min-height umzuwandeln, da sie diese Eigenschaftsangabe gemäß der CSS-Spezifikation als absolute Höhe behandeln, womit die Höhe der verschachtelten DIV-Blöcke nicht zunehmen wird, wenn der Inhalt dieses festgelegte Maß überschreitet. Den "übergroßen" Inhalt lassen standardkonforme Browser in diesem Fall dann über den unteren Boxenrand / Rahmen hinauslaufen.

mfg Maik

 

[blubber02]

Ich Danke recht herzlich!
Es hat geklappt