Layer ohne Höhenangabe

[LuvShining]

Hallo zusammen,
ich möchte meinen Seiteninhalt in einen Container (#rahmen) packen. Bestandteil des Seiteninhalts:
- Navigation links (#nav)
- Content mittig (#content)
- Text-Anreisser links (#anreisser)
- Bannerwerbe-Platz links außen (#commercial)

Mein Problem nun, vielleicht bin ich mal wieder zu unkonzentriert °schäm°....
Der Rahmen #rahmen nimmt nicht automatisch die vorhandene Höhe des Inhalts/Anreisser, etc.- kurzum, der Rahmen nimmt keine Rahmenfunktion an, weil er den Inhalt nicht einrahmt. Setze ich die height: 100%, nimmt er lediglich die Bildschirm-Höhe an, was ja auch nicht meine Idee war.
Kann man mir folgen?!

Hat jemand eine Idee, wo nun wieder mein Denkfehler liegt? :-(

CSS

#rahmen { /* Rahmen */
position:absolute;
top:0px;
left:0px;
width:900px;
border-right:#0137A1 1px solid;
background-color:#FFFFFF;
overflow: hidden;
}

#navi { /* Navigationsbar */
position:absolute;
top:0px;
left:5px;
width:100px;
}

#content { /* Content */
position:absolute;
top:0px; 
left:110px;
width:530px;
font-family:arial,helvetica;
color:#000000;
font-size:8pt;
}

#anreisser { /* Anreisser*/
position:absolute;
top:0px; 
left:560px;
width:210px;
text-valign:top;
font-family:arial,helvetica;
color:#C9C9C9;
font-size:8pt;
text-align:center;}

#commercial { /* Werbung */
position:absolute;
top:0px; 
left:780px;
width:120px;
text-valign:top;
font-family:arial,helvetica;
color:#C9C9C9;
font-size:8pt;
text-align:center;}

HTML

<div id="rahmen">
     <div id="navi">Hier steht die Navi</div>
            <div id="content">Hier steht der Inhalt</div>
                  <div id="anreisser">Anreisserplatz</div>
                        <div id="commercial ">Werbung</div>
</div>

Über eure Hilfe würde ich mich freuen.

Viele Grüße
Nadine

 

[deepthroat]

Hallo Nadine.

Das ist das Problem mit absolut positionierten Boxen, sie werden völlig aus der normalen Positionierungberechnung herausgelöst und haben keinen Einfluß mehr auf die Größe von anderen (absolut) positionierten Boxen.

Du kannst die inneren divs auch nicht relativ positionieren, da dabei die Berechnung der Größe der umgebenden Rahmenbox so geschieht als ob die divs nicht verschoben worden wären und die Größe vom Rahmen stimmt wieder nicht.

Deswegen würde ich dir empfehlen nur den Rahmen absolut zu positionieren und die inneren Elemente mit float und clear und entsprechenden margin bzw. padding in Position zu bringen.

Gruß

/edit: Mir fällt gerade ein, dadurch das du die Elemente nur horizontal verschiebst, könntest du die doch relativ positionieren weil du die Größe vom Rahmen und die der einzelnen Elemente ja explizit festlegst. Solange du nicht vertikal verschiebst stimmt auch die Größe vom Rahmen noch.