[HTML/CSS] Zwei Divs in einem Div - das Parentelement sollte die seine Größe anpassen

[Saschlong]

Hoi,

folgendes:
Ich habe zwei div's in einem Elternelemt.
Dieses sollte sich der vertikalen Ausdehnung seiner Kinder anpassen.
Tut's aber nicht und ich komme nicht darauf wieso...

So sieht es jetzt aus: http://v2.industrialpimps.de

Snippet HTML-Template:

<!--
 content
 -->
 <div id="content-container">
  <!-- left -->
  <div id="left-content">
   ###LEFT-CONTENT###
  </div>
  <!-- right -->
  <div id="right-content">
   ###RIGHT-CONTENT###
  </div>
 </div>

Snippet CSS:

#content-container
{
 position: absolute;
 left: 106px;
 top: 66px;
 width:564px;
 background-color: rgb(235,235,235);
 z-index:1;
 }

#left-content, #right-content
{
 position: absolute;
 top: 0px;
 width: 46%;
 padding: 0px 2% 2% 2%;
 background-color: rgb(235,235,235);
 }

#left-content
{
 left: 0px;
 }

#right-content
{
 right: 0px;
 }

 

[shady.]

tut mir leid aber ich kann mir nich vorstellen wie das ganze später aussehen soll...

 

[Saschlong]

Ganz einfach, das Mamma-Div soll einfach den Raum der frei bleibt als Hintergrund ausfüllen.

 

[ExtiQ]

Ich versteh dich auch noch nicht so ganz. Soll das ganze in etwa so sein?

Btw. Geile Paint skills oder? xD

 

[Saschlong]

Yeah! 1337 Paintskillz!
So wie das linke sollte es aussehen

 

[mh1001]

Hallo,

das Problem liegt einfach darin, dass du als Positionierungsart "absolute" verwendet.
Bei einer absoluten Positionierung ist dies nicht möglich.
Positioniere deswegen einfach die entsprechenden Elemente mit "position: relative;" oder "position: static" (was auch der Initialwert ist).
Damit dann auch die beiden Container nebeneinander angeordnet sind kannst du dann auf "float: left;" zurückgreifen.

MfG mh1001

//Edit:

Wie ich gerade sehe, scheints du dich gerade an obigem zu versuchen. Vergesse auch nicht das "Floating" wieder aufzuheben, sonst bleibt der gewünschte Effekt auch aus.

 

[Saschlong]

In welchen Element soll ich das Float wieder aufheben?
Wenn ich nur das linke floaten lasse zerreißt es das Layout

Btw: So wie's der IE gerade darstellt soll's aussehen...

 

[mh1001]

Um eine für alle gängigen Browser darstellbare Lösung zu erreichen, würde ich es folgendermaßen machen:

#content-container
{
  position: absolute;
  left: 106px;
  top: 66px;
  width:564px;
  background-color: rgb(235,235,235);
  z-index:1;
}

#left-content, #right-content
{
  position: relative;
  float: left;
  width: 46%;
  padding: 0px 2% 2% 2%;
  background-color: rgb(235,235,235);
}

.clr {
  clear: both;
  height: 0px;
  overflow: hidden;
  font-size: 0;
}

<div id="content-container">
  <!-- left -->
  <div id="left-content">
    ###LEFT-CONTENT###
  </div>
  <!-- right -->
  <div id="right-content">
    ###RIGHT-CONTENT###
  </div>
  <div class="clr"></div>
</div>

MfG mh1001

 

[Saschlong]

Phat THX!
So tut's!

CSS:

#left-content, #right-content
{
 top: 0px;
 width: 46%;
 padding: 0px 2% 20px 2%;
 background-color: rgb(235,235,235);
 float:left;
 }

#clear
{
 clear: both;
 height: 0px;
 }

HTML:

<div id="content-container">
  <!-- left -->
  <div id="left-content">
   ###LEFT-CONTENT###
  </div>
  <!-- right -->
  <div id="right-content">
   ###RIGHT-CONTENT###
  </div>
  <div id="clear">&nbsp;</div>
 </div>

 

[mh1001]

Bitteschön.

Noch ein kleiner Tipp:

Die beiden anderen Angaben in der "clr"-Klasse mögen zwar auf den ersten Blick etwas zwecklos zu erscheinen, sind es aber nicht.
Auch wenn die Höhe auf "0" gesetzt ist setzen einige Browser diese auf die "line-height" der verwendeten Schrift. Dadurch kann es zu unschönen Verschiebungen kommen.
Nicht genug dessen gibt es dann so manch einen Browser, der das immer noch nicht so mit sich machen lässt (imho mal wieder der Internet-Explorer 5 oder 6 ). Da hilft letztendlich nur ein "overflow: hidden;".

MfG mh1001