Formatierung der css-Navileiste

[Thomas]

Hallo zusammen!
Sicherlich gibt es in diesem Forum schon Fragen und Anworten zu meinem Problem. Aber ich mache gerade meine "ersten Schritte" in *.css, deshalb bitte Nachsicht!
Ich habe folgendes Layout-Problem:
Header-, Navi- und Footer-Bereich sind mit derselben Hintergrundgrafik hinterlegt, der Inhaltsbereich (Main) ist weiß.

Bei einem kurzen Text im Main-Bereich ist das Layout in sich geschlossen. Bei längerem Text, in dem ich scrollen muss, zerschießt es mir das Layout, da der Navi-Bereich unter dem letzten link endet.
Wie kann ich dafür sorgen, dass der Navi-Bereich grundsätzlich immer bis zum Footer reicht, das Layout also - egal bei welcher Textlänge - erhalten bleibt?

Für eine Antwort wäre ich sehr dankbar.

Es folgt ein Ausschnitt aus meiner ausgelagerten *.css-Datei

/***************** TEXT IN THE HEADER **************************/
#top h1 {
 font-family:times, serif;
 font-weight:bold;
 font-size:x-large;
 text-align:right;
 margin-top:20px;
 margin-left:1px;
 }

/*************************** HEADER PROPERTIES ************************/
#top {
 margin:0 auto;
 padding:2px;
 height:70px;
 background:url(grafiken_und_bilder/gimmicks/bg.jpg) repeat-x;
 width:100%;
 }

/************************ LEFT *****************/
#left {
 float:left;
 padding:1px;
 width:20%;
 text-align:center;
 background:url(grafiken_und_bilder/gimmicks/bg.jpg) repeat;
 }

#left h1 {
 font-size:120%;
 padding-top:3px;
 font-family:helvetica, arial, georgia, times, sans-serif;
 text-align:center;
}

#left h2 {
 font-size:110%;
 font-family:helvetica, arial, georgia, times, sans-serif;
 text-align:center;
}

#left p {
 font-size:90%;
 text-align:center;
 padding-bottom:10px;
 margin-top:-3px !important; /*****  FIREFOX  *****/
 margin-top:-14px;             /***** INTERNET EXLORER *****/
 color:#404040;
}

/************************** MAIN ******************/

#main {
 float:right;
 width:74%;
 line-height:1.1em;
 margin-left:1%;
 padding-top: 10px;
}

#main p, p {
 font-family:verdana, arial, helvetica, sans-serif;
  font-size:100%;
 color:#404040;
}

#main h1 {
 font-family:verdana, arial, helvetica, sans-serif;
 font-size:120%;
 font-weight:bold;
 border-bottom:1px solid #c4c4c4;
 padding-bottom:3px;
 margin-top:24px;
}

#main h2 {
 font-family:verdana, arial, helvetica, sans-serif;
 font-size:110%;
 font-weight:bold;
}

img:hover {
 border:1px solid #4BA9E9;
 background:#EbF1F5;
}

/********************************************    FOOTER  *****************/

#footer {
 padding:10px 0 3px 0;
 font-family:verdana, arial, helvetica, sans-serif;
 font-size:90%;
  text-align:center;
 width:100%;
 margin:0 auto;
 clear:both;
 background:url(grafiken_und_bilder/gimmicks/bg.jpg) repeat-x;
}

.footer {
 margin-top:-2px;
}

[Jan]

Hallo,

So weit ich weiß, ist das mit CSS nicht möglich. Du könntest um die beiden Bereiche jedoch ein weiteres div mit dem entsprechenden Hintergrund legen, der dann für beide gilt.

Grüße
Jan

[Ashura]

Hallo Thomas.

Wie kann ich dafür sorgen, dass der Navi-Bereich grundsätzlich immer bis zum Footer reicht, das Layout also - egal bei welcher Textlänge - erhalten bleibt?

Siehe SELFHTML Aktuell Weblog: Grundlagen für Spaltenlayout mit CSS.

Einen schönen Montag noch.

Gruß, Ashura