CSS Layer-Problem

[dispositor]

Hi Junx und Mädelz,

ich habe folgendes Problem:

ich habe 2 Layer die nebeneinander stehen, und ich möchte gerne, dass der layer der rechts steht genau so hoch ist wie der layer der links steht.
Ich habe den Layer dann mal 100% Höhe gegeben, aber dann geht er logischerweise über die ganze Seite (siehe Anhang)

So, hier der Quelltext

<div id="main">
	<div id="content">
		content
	</div>
	<div id="boxleft">
	</div>
	<div id="footer">
		footer
	</div>
	<div id="copyright">
		copyright
	</div>
</div>

Styles:

#main {
	position: absolute;
	width: 764px;
	left: 50%;
	margin-left: -382px;
	height: 100%;
}

#content {
	position: relative;
	float: left;
	width: 553px;
	padding: 15px;
	background-color: #EFF5FA;
	margin-top: 1px;
}

#boxleft {
	position: relative;
	float: right;
	width: 170px;
	padding: 5px;
	background-color: #6699CC;
	margin-top: 1px;
	height: 100%;
}

#footer {
	position: relative;
	border-top: 1px #FFFFFF solid;
	float: left;
	width: 573px;
	padding: 5px;
	background-color: #D4D7D9;
	font-size: 9px;
	color: #333333;
}

#copyright {
	position: relative;
	border-top: 1px #FFFFFF solid;
	float: right;
	width: 170px;
	padding: 5px;
	background-color: #AAAEB1;
	font-size: 9px;
	color: #333333;
}

Hat jemand einen Vorschlag wie ich das umsetzen könnte?

thx

[Abraxax]

gib doch die höhe nicht als 100% sondern als z.b. 200 px an

[dispositor]

Original geschrieben von Abraxax
gib doch die höhe nicht als 100% sondern als z.b. 200 px an

Die Höhe des linken Layers ist aber variabel und der rechte Layer sollte sich wenn möglich der Höhe anpassen.

[Abraxax]

dann schachtel die divs einfach

[dispositor]

ok, ich werds nochmal versuchen.

thx fürs erste...

[Big Chief]

Hi, ich habe genau dasselbe Problem .. ich habe auch zwei Layer, die immer dieselbe Höhe haben sollen, wobei der Layer "content" eben eine variable Höhe haben soll, und der Layer "boxright" sich daran ausrichtet.

#rahmen {
width:800px;
padding:5px;
position: absolute;
margin-left:-400px;
left:50%;
border: 1px solid black;
}

#content {
float:left;
width: 550px;
padding: 5px;
border: 1px solid black;
}

#boxright {
float:right;
width: 150px;
padding: 5px;
background-color: #6699CC;
height: 100%;
border: 1px solid black;
}
------------------------------
<div id="rahmen">

<div id="content">
content
</div>

<div id="boxright">
test
</div>

</div>

Ich habe auch schon einige Verschachtelungen versucht, jedoch hat nichts zum Erfolg geführt. Als Beispiel habe ich mal einen Layer "rahmen" um die beiden Layer herum gelegt, und mir erhofft, dass sich "boxright" dann mit seiner height:100% daran ausrichtet. Aber auch das passiert nur, wenn ich "rahmen" schon einen festen Wert vorgebe ... was ich ja nicht machen will ...

[Big Chief]

*das erste und letzte mal hochschubs*

Findest sich nun vielleicht ein weiser CSS-Crack, der mir helfen kann ... habe gestern nochmals zwei Stunden damit verbracht, zu versuchen die beiden doofen Layer auf dieselbe Höhe (aber eben variabel immer die des grösseren Layers) zu bekommen, aber ich bekomms einfach nicht hin .. egal wie ich schachtele.
Mit Tabellen ist das ganze natürlich kein Problem, aber ich möchte auf Tabellen bei meinem Design komplett verzichten.

[Kropff]

ich glaube ich habs, du musst doch die ebenen verschachteln:

#rahmen {
width:800px;
padding:5px;
position: absolute;
margin-left:-400px;
left:50%;
border: 1px solid black;
}
#content {
float:left;
width: 700px;
padding: 5px;
border: 1px solid black;
height: 100%;
}

#boxright {
width: 150px;
padding: 5px;
background-color: #6699CC;
border: 1px solid black;
position: absolute;
left: 550px;
top: 10px;
height: 100%;
} 

--------------------------------------------------------------------------
und dann folgendes:

<div id="rahmen">
<div id="content">
          content <br><br>
          sdgf dsjgö<br><br>
          dsgfdsjg dsjgölds  <br><br>
          gdsjölgjdsdglöjds <br><br>
          <div id="boxright">
               test
          </div>
     </div>
</div> 

musst das dann noch verfeinern, ich denke aber, dass es das ist was du willst.

gruss
peter

[dispositor]

Das klappt ja wunderbar!!

ein riesen dankeschön von mir

[Big Chief]

Hm ... also der IE passt die Höhe zwar an, aber Opera spielt schonmal nicht mit ... also bin ich in Sachen Mozilla etc. auch etwas skeptisch .... hab hier auf der Arbeit leider Mozilla nicht greifbar ... muss ich mit dem Testen noch ein bisschen warten.


edit:
bei dispositor klappt es .. entweder er hat nur IE, oder ich hab doch noch nen Fehler drin ..

[Kropff]

nee mozilla is nich, da habe ich leider keine lösung gefunden, die verwendung von padding ist sowieso nicht zu empfehlen, da der IE das falsch interpretiert.

gruss
peter

[dispositor]

also bei firefox klappts so:

#rahmen {
	width:400px;
	padding:0px;
	position: absolute;
	margin-left:-200px;
	left:50%;
	border: none;
}

#content {
	background-color: #CCCCCC;
	float:left;
	width: 100%;
	border: none;
	height: 100%;
}

#boxright {
	width: 150px;
	background-color: #6699CC;
	border: none;
	position: absolute;
	left: 250px;
	top: 0px;
	height: 100%;
}

.box {
	padding: 5px;
}

<div id="rahmen">
	<div id="content">
		<div class="box">
			content<br><br>
			sdgf dsjgö<br><br>
			dsgfdsjg dsjgölds <br><br>
			gdsjölgjdsdglöjds<br><br>
			gdsjölgjdsdglöjds<br><br>
			gdsjölgjdsdglöjds<br><br>
			gdsjölgjdsdglöjds
		</div>

		<div id="boxright">
			<div class="box">
				test
			</div>
		</div>
	</div>
</div>

[Big Chief]

hm .. da hier Opera noch mehr rumspinnt (ja, ich steh auf opera), werde ich wohl doch auf Tabellen umsteigen .. schade eigentlich

[Kropff]

hat das mal einer mit mozilla über version 1.2 getestet. mehr habe ich hier auf der firma im moment nicht.

gruss
peter

[wahsaga]

Original geschrieben von dispositor

<div id="rahmen">
	<div id="content">
		<div class="box">
			content<br><br>
                        ...
		</div>

		<div id="boxright">
			<div class="box">
				test
			</div>
		</div>
	</div>
</div>

bevor ihr HTML dermaßen vergewaltigt, bleibt doch lieber bei einer schlichten, einfachen tabelle.
dieses beispiel hat mit semantisch sinnvoller auszeichnung des inhaltes ja nun wirklich nichts mehr zu tun.

wer sowas einsetzt, nur um dann sagen zu können, "mein layout ist ohne tabellen, und deins nicht, *ätsch*" - der hat den sinn von HTML wahrscheinlich noch viel weniger verstanden, als der jenige, der dafür einfach eine tabelle genommen hat.