Absolute Positionierung an Eltern-DIV

[Hans]

Hallo,
ich habe eine Seite, bestehend aus einem großen Div, das alles weitere in der Mitte des Browsers zentriert.
Darin ist ein Div, das eine rechte Spalte darstellen soll, die unter dem Header sein, aber bis zum Seitenende 100% Höhe haben soll (-> Problem 1: IE 6 stellt es korrekt dar, FF nur eine ca. 150px hohe Spalte).
In diesem Div wiederum soll sich ein Logo 10px von rechts und 10px von unten befinden.
Das Problem ist, dass ich im FF ein völlig anderes Ergebnis habe, als im IE...

HTML:

<div id="center">
<div id="spalterechts">
<div id="innung">
</div>
</div>
</div>

CSS:

#center {
 position: absolute;
 left: 50%;
 width: 999px;
 margin-left: -500px;
 }

#spalterechts {
 position:absolute;
 top: 185px;
 right: 12px;
 height: 100%;
 width: 217px;
 background-color: #97C4E3;
 background-image: url('spalterechts_hintergrund.gif);
 background-repeat: repeat-x;
 }

#innung {
 background-image:url('innung.gif');
 background-repeat:no-repeat;
 position:absolute;
 bottom:10px;
 right:10px;
 width:133px;
 height:87px;
 }

Danke für eure Hilfe

[Hans]

Hier nochmal zur Verdeutlichung:

So soll es aussehen:
http://img478.imageshack.us/img478/6337/vorlagesu4.jpg

So zeigt es Firefox
http://img521.imageshack.us/img521/4845/firefoxnz6.jpg

So zeigt es der IE 6
http://img478.imageshack.us/img478/1421/ieyq4.jpg

[Antipitch]

Moin Hans,

bestehend aus einem großen Div, das alles weitere in der Mitte des Browsers zentriert.

In deiner "so soll es aussehen"-Grafik kann ich nichts zentriertes erkennen. Falls du vertikal zentriert meinst, würde das jedoch nur Sinn machen, wenn du sicherstellen kannst, dass deine Inhalte nie die Höhe des Viewports überschreiten(?).

Das führt dann zur nächsten Frage: Wenn deine Inhalte doch mehr Höhe haben können als der Viewport, was passiert dann mit dem rechten Rand (wächst der mit?) und was mit dem Logo (auch dann ganz unten? Sprich unterhalb des unteren Fensterrands?)

Wenn du dazu nochmal was sagen könntest, findet sich vielleicht ne Lösung...

Gruß
Antipitch

[Hans]

In deiner "so soll es aussehen"-Grafik kann ich nichts zentriertes erkennen. Falls du vertikal zentriert meinst, würde das jedoch nur Sinn machen, wenn du sicherstellen kannst, dass deine Inhalte nie die Höhe des Viewports überschreiten(?).

Also ich meine nur horizontal zentrieren, bei der "so soll es aussehen"-Grafik ist nur der effektive Inhalt dargestellt, im Endeffekt ist bei Bildschirmen >1024px Breite dann links und rechts noch ein Rand

Das führt dann zur nächsten Frage: Wenn deine Inhalte doch mehr Höhe haben können als der Viewport, was passiert dann mit dem rechten Rand (wächst der mit?) und was mit dem Logo (auch dann ganz unten? Sprich unterhalb des unteren Fensterrands?)

Also diese rechte Spalte soll bis ganz unten gehen, sprich: wenn ich einen 3 Meter langen Content habe, dann ist die Spalte auch 3 Meter lang, und das Logo ist dann ganz unten.

[Antipitch]

N'abend Hans,

bißchen busy, sorry. Biste was weiter gekommen? Sonst guck dir mal den beigefügten Code an (nicht auf Mac getestet). Bei Fragen fragen...

Gruß
Antipitch

* {
margin:0;
padding:0;
border: 0 none;
}
html, body {
height:100%;
}
body {
width:999px;
margin:0 auto 0 auto;
}
#header {
width: 999px;
height: 100px;
position:absolute;
top:0;
z-index:10;
background-color: green;
}
#container {
width: 999px;
height: 100%;
float:left
overflow: visible;
background-color: brown;
}
#content {
margin-right:-217px;
border-right: 217px solid red;
width: 782px;
min-height: 100%;
float:left;
background-color: brown;
}
* html #content {  /* IE Hack for 100% height */
height: 100%;
}
#right {
width:217px;
float:left;
background-color: red;
}

#logo {
margin-top: -50px;
width: 999px;
height:22px;
float:right;
text-align:right;
}

<div id="header">Inhalt header</div>
<div id="container">
  <div id="content">
    <div style="padding-top:100px;height:150px;">inhalt links</div>
  </div>
  <div id="right">
    <div style="padding-top:100px;height:150px">inhalt rechts</div>
  </div>
  <div id="logo">logo</div>
</div>