✔ Abhängige Layer

[MonoMental]

Hallo,

und zwar hab ich in einen Container, der 1000px breit ist und in welchem jeweils 4 weitere Layer nebeneinander aufgeführt sind.
Ganz links ist die navi_box mit fester breite, dann kommt der Contentbereich (feste breite), dann der Newsbereich (feste breite) und danach ein spacer (feste breite). Die höhenangaben für den hauptcontainer und die untercontainer sind jeweils auf 100% gesetzt.

Meine Frage nun: wie kriege ich es hin, dass die 3 rechten Felder (Content, News und Spacer) sich jeweils abhängig dem Inhalt mit vergößern? D.h. ist im Newsbereich mehr Inhalt als im Contentbereich, so soll sich der Contentbereich und der Spacer auch auf die höhe des newsbereiches angleichen.

Hier noch ein paar Code-Auszüge:

CSS:

.body {
background-color:#F8F8F8;
}
#spacer6 {
float:right;
width:49px;
height:100%;
background-color:#EDD9C3;
border: solid 1px;
border-color: #F8F8F8;
}
#news {
float:left;
width:150px;
height:100%;
background-color:#F2E9DD;
border-top: solid 1px;
border-color: #F8F8F8;
}
#menucontainer1 {
width:188px;
line-height:30px;
color:#DDDDDD;
}
#menucontainer1 {
float:left;
color: #542700;
}
#container_content {
position:absolute;
left:0px;
top:196px;
height:100%;
width:999px;
background-color:#F8F8F8;
}
#container_box1 {
float:left;
position:relativ;
width:608px;
height:100%;
border-color: #F8F8F8;
border:solid 1px;
background-color:#F2E9DD;

HTML:

<div id="container_content">
<div id="menucontainer1">
	 <a class="nav" href="#">&raquo; test1</a><br/>
	 <a class="nav" href="#">&raquo; test2</a><br/>
	 <a class="nav" href="#">&raquo; test3</a><br/>
	 <a class="nav" href="#">&raquo; test4</a><br/>
	 <a class="nav" href="#">&raquo; test5</a><br/>
	 <a class="nav" href="#">&raquo; test6</a><br/>
	 <a class="nav" href="#">&raquo; test7</a><br/>
</div>
<div id="spacer6"></div>
<div id="container_box1">...</div>
<div id="news">...</div>
</div>

thx im voraus

greetz

der mono

 

[Maik]

CSS-Lösungen für ein mehrspaltiges Layout mit gleich hohen DIVs findest du hier:

1. Equal-Height CSS Columns - Keeping it tall - redmelon.net
   
   
2. Stu Nicholls: Three Columns

 

[MonoMental]

Die Lösungen sind zwar gut, aber kann ich das nicht auf mein Beispiel anwenden, weil ich zwischen den einzelnen Containern jeweils noch einen Rahmen von 1px habe.

 

[Jantz]

sorry verstehe dein Problemnoch nicht genau. Könntest du es vielleicht nochmal erklären? Der streckt sich doch automatisch?!

 

[MonoMental]

Problem hat sich schon erledigt.

Die Layer strecken sich leider (trotz 100%) nicht automatisch - zumindest im IE nicht. Dieses Problem ist allgemein bekannt.

Der Lösungsweg über einen zentralen Layer mit jeweils 180px rahmen links und rechts war auch nicht möglich, da ich zwischen allen boxes noch einen 1px dicken, weißen Rahmen verwende.
Lösung war die Definition eines Hintergrundbildes als Spacer für den Container_Content (mit 999px*1px). Die Container mit den News und Content_Boxes brauchen nun keine Farbangabe für den Hintergrund und müssen sich daher nicht 100% anpassen.

greetz

der mono

 

[Maik]

Problem hat sich schon erledigt.

Dann markiere das Thema bitte auch als solches, vielen Dank

 

[MonoMental]

ups - in der Hektik ganz vergessen - now done...