HG Farbe wird beim scrollen nicht angezeigt

[Dr. Snuggles]

Hallo zusammen :-)

Immer wieder stoße ich auf folgendes Problem und finde einfach keine Lösung:
Die Seite besteht aus einem roten Streifen im Oberen Teil, indem sich der Titel befindet. Direkt darunter die horizontale Navileiste. Beide sollen sowohl rechts, als auch links bis zum Browserfenster laufen. Nun habe ich der Navi eine min-width zugeteilt, um zu vermeiden, dass die Menüpunkte bei kleinen Fenstern aus der Zeile springen. Wenn ich dann den Scrallbalken nach rechts bewege, wird aber die rote Hintergrundfarbe nicht weiter angezeigt.
Könnte mir jemand einen Tip geben, wie man das korrigiert bzw. wie man sowas benennt, damit ich noch weiter im web suchen kann? danke

  
<div id="header">  
 <div id="Logo">  
  <a href="xyz.html"><img src="image/logo.gif" alt="" width="170" height="200" border="0" /></a>  
 </div>  
  
<ul id="menu">  
<li><a href="(EmptyReference!)" target="_self" title="Home">Home</a></li>  
<li><a href="(EmptyReference!)" target="_self" title="xy"  class="current">xy</a></li>  
<li><a href="(EmptyReference!)" target="_self" title="xy">xy</a></li>  
</ul>  
</div>  

  
#header {  
        margin-top:0px;  
 height:215px;  
 background-color: #ff0000;  
 width: 100%;  
 }  
#Logo   {  
 position: absolute;  
 margin-top: 15px;  
 left: 50px;  
 float: left;  
    }  
  
 ul#menu {  
  position: absolute;  
 margin-top: 208px;  
 margin-left: 0px;  
 left:0px;  
 right:0px;  
 height: 43px;  
 background:  url("../image/menu-bg.gif") top left repeat-x;  
 font-size: 0.8em;  
 font-family: Helvetica, Arial, Verdana, sans-serif;  
 font-weight: bold;  
 list-style-type: none;  
 padding-left: 280px;  
 min-width: 680px;  
  }  
  
ul#menu li {  
 display: block;  
 float: left;  
 margin: 0 0 0 5px;  
  
 }  
ul#menu li a {  
 height: 43px;  
 color: #000000;  
 text-decoration: none;  
 display: block;  
 float: left;  
 line-height: 200%;  
 padding: 8px 11px 0;  
  
 }  
ul#menu li a:hover {  
 color: #ca1313;  
 background: url("../image/current-bg.gif") top left repeat-x;  
 padding: 5px 11px 0;  
  
 }  
ul#menu li a.current{  
 color: #ca1313;  
 background: url("../image/current-bg.gif") top left repeat-x;  
 padding: 5px 11px 0;  
  }  
  

[Dr. Snuggles]

Kurze Anmerkung: wenn ich die min-width der Navileiste entferne, und stattdessen  "white-space: nowrap;" einfüge, ist zwar der Inhalt wieder bei 100%, aber die Menüpunkte wanderen bei verkleinertem Fenster trotzdem in die nächste Zeile...hiiiiilfeee.... ;-)