Layout problem, div scrollen

[dj-giver]

Hallo Leute,
leider finde ich keine passende lösung um nur ein Div zu scrollen. Die Divs befinden sich übereinander, weil sie mit hintergrundbildern aus gestattet sind. Ich habe das mal versucht zu skizzieren

Wie gesagt, es soll nur das contentDIV gescrollt werden. Der Scrollbalken soll der große ganz rechts sein und nicht am DIV selbst.

Könnt Ihr mir helfen???

Hier mein bisherriger Code:

* {margin:0; padding:0;}
html, body {height:100%;  overflow:hidden;
}
img {border:0;}
a:link {  color: #707070; } 
a:visited  {  color: #707070; } 
a:hover { color: #000000; } 
a:active {   color: #707070; } 
p,a,h2,h3,h4,ul,ol,li,div,td,th,input,select,textarea,address,blockquote,nobr  {
   font-family: verdana, arial, helvetica, sans-serif;
    font-weight:normal;
   font-size: 11px; 
   line-height: 17px;
    color: #707173;
   text-decoration:none; 
   }
   
h1,h2,h3,h4  {
   font-family: verdana, arial, helvetica, sans-serif;
    font-weight:bold;
   font-size: 14px; 
   line-height: 17px;
    color: #a21a41;
   text-decoration:none; 
   }

ul,li  {padding-left:5px; 
line-height: 2; 
list-style-image:  url(pics/haus.gif);
}

body {   position: center; 
background-image:  url(../pics/back1.jpg);
background-repeat:repeat-x;
}

#haupt  {   
   background-image: url(../pics/back2.jpg);   
    background-color:#ffffff;
   background-repeat:repeat-x;
    border: #000000 1px solid;
   margin:0 auto;
    position:relative;  
   width:950px;
   height: 100%;
   }

#navi  {border: red 0px dashed ;
   width:700px;
   float:right;
    height: 100%;
   }

#content {
   height: 100%;
    border:0px solid #3399ff;
   background-image:  url(../pics/back3.jpg);
   background-repeat:repeat-y;
    width:475px;
   }

<div id="haupt">
  <div id="navi">
     <div id="content">content</div>
  </div>
</div>

[th2409]

Scrollbalken rechts und nur das content-div verschieben? Ich hätte gesagt, das geht nicht mit normalen HTML/CSS-Mitteln. Mit JS kann man da vielleicht was programmieren.

Edit: geht gewissermaßen doch. Aber nur mit bestimmten Eckbedingungen.
Die "normale" Seite passt unter allen Umständen auf eine Bildschirmseite - dann kann man die "feststehenden" Container fixed positionieren (Vorsicht: IE6 macht das nicht mit!). Damit kann man sich die div#content-Höhe sparen und lässt ihn in der Höhe soweit laufen lassen wie inhaltlich notwendig.
Beim Scrollen wird so die ganze Seite (mitsamst dem content) gescrollt, alles andere bleibt dank css-fixed an der Stelle stehen. Nachteilig ist es allerdings, wenn der feststehende Teil nicht mehr in meinen Viewport passen sollte, denn ich kann ihn ja nicht scrollen...