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

Saschlong

Lt. Junior Grade
Dabei seit
Feb. 2004
Beiträge
266
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:

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

Code:
#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.

Cadet 4th Year
Dabei seit
Jan. 2006
Beiträge
67
tut mir leid aber ich kann mir nich vorstellen wie das ganze später aussehen soll...
 

Saschlong

Lt. Junior Grade
Ersteller dieses Themas
Dabei seit
Feb. 2004
Beiträge
266
Ganz einfach, das Mamma-Div soll einfach den Raum der frei bleibt als Hintergrund ausfüllen.
 
E

ExtiQ

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

Btw. Geile Paint skills oder? xD
 

Anhänge

Saschlong

Lt. Junior Grade
Ersteller dieses Themas
Dabei seit
Feb. 2004
Beiträge
266
Yeah! 1337 Paintskillz!
So wie das linke sollte es aussehen :freaky:
 

mh1001

Lt. Commander
Dabei seit
Nov. 2003
Beiträge
2.039
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. ;)
 
Zuletzt bearbeitet:

Saschlong

Lt. Junior Grade
Ersteller dieses Themas
Dabei seit
Feb. 2004
Beiträge
266
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

Lt. Commander
Dabei seit
Nov. 2003
Beiträge
2.039
Um eine für alle gängigen Browser darstellbare Lösung zu erreichen, würde ich es folgendermaßen machen:
Code:
#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;
}
HTML:
<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

Lt. Junior Grade
Ersteller dieses Themas
Dabei seit
Feb. 2004
Beiträge
266
Phat THX!
So tut's!

CSS:

Code:
#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:

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

Lt. Commander
Dabei seit
Nov. 2003
Beiträge
2.039
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
 
Zuletzt bearbeitet:
Top