Positionierung als div

[cybertrek]

Hallo,

Aufgrund einer grundsätzlichen Überarbeitung meiner Seiten möchte ich das bisherige Tabellenlayout durch den Einsatz von <div> Elementen ablösen. Das Design der Artikel-Seiten soll wie folgt aussehen:



Links oben ein Bereich für die Überschrift
Rechts ein individuell hoher Bereich für den Text
Links unten ein Footer

Dieser Footer soll in einer Linie mit der letzten Zeile des Artikelbereichs abschließen.

Bei meinen Versuchen ist bisher folgender Code entstanden:

CSS:

#top	        { float:left; width:190px; }
#articlearea	{ border-left:1px solid #8898bf; margin-left:200px; }
#bottom	        { float:left; width:190px; }

HTML:

<div id="top">
</div>

<div id="articlearea">
</div>

<div id="bottom">
</div>

Für #bottom fehlt mir hier noch das entsprechende Attribut für die gewünschte Positionierung. Ich habe es mit bottom und vertical-align getestet, es wird jedoch stets unterhalb der articlearea angezeigt. In der CSS Kurzreferenz von selfHTML habe ich bereits nachgeschlagen, jedoch ist mir abgesehen von den genannten Eigenschaften ist mir kein passendes in die Augen gesprungen. Habe ich etwas übersehen bzw. einen Denkfehler in meinem Ansatz? Bitte um Hilfe bzw. Denkanstoß wo ich ansetzen muss.

[Destruction]

Mach doch einfach einen Div Container um alles herum und dann setzt du den Footer relativ zur bottom Position

[cybertrek]

Danke für den Tipp. Habe jetzt damit im Hinterkopf folgendes CSS gebastelt:

#container	{ }
#header		{ float:left; width:190px; position:fixed; margin-left:0px; }
#articlearea	{ border-left:1px solid #8898bf; margin-left:200px; }
#footer	        { position:fixed; bottom:0px; }

Damit wird jetzt sowohl der Titel-Bereich (header) als auch der Footer jeweils oben bzw. unten im Fenster fixiert und scrollt beim Scrollen mit. Zwar nicht das was ich ursprünglich im Sinn hatte (und du wohl gemeint hast) aber wirkt auf den ersten Blick recht gut. Was ich aber bisher mit den unterschiedlichen position Werten nicht geschafft habe ist, dass der Footer in der letzten Zeile statisch positioniert wird. Er ist stets entweder zu weit oben bzw. zu weit unten. Am interessantesten fand ich hier position:absolute, wodurch der Footer im linken Bereich zentriert zur articlearea angezeigt wird. Mit position:relative; bottom:0px wird es unterhalb der textarea angezeigt.

<div id="container">

<div id="header">
</div>

<div id="articlearea">
</div>

<div id="footer">
</div>

</div>