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;
}