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:

Code: Alles auswählen

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

Code: Alles auswählen

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

[sejuma]

Das sieht mir nach einem Faux-Columns-Problem aus.
Wenn deine Hintergrundgrafiken die gleiche Höhe haben bzw. du sie auf gleiche Höhe bringen könntest, dann reihe sie mit einem Grafikprogramm nebeneinander an und speichere sie als Gesamtgrafik ab.
Weise sie dann deinem #haupt zu und lass überall die Höhenangabe weg.
Näheres siehe http://www.ohne-css.gehts-gar.net/0005.php

[dj-giver]

Das sieht mir nach einem Faux-Columns-Problem aus.

Falsch
Mir geht es in erster Linie um das Fixieren der divs beim scrollen!
Hier mal ein Beispiel:
http://www.orange-cube.de

Aber Danke schon mal für deine mithilfe

[ThomaZ]

Mir geht es in erster Linie um das Fixieren der divs beim scrollen!

Die Antwort liegt näher als du denkst ^^

Code: Alles auswählen

div[id="containerXYZ"]   {
   position:      fixed;
   top:         0;
   left:         0;
}


Dieser Code FIXIERT einen Conteiner an seiner Position, und macht ihn unabhängig von Scrollbalken
des Browsers. Mit 'z-index' und 'position' lassen sich da supergeile Effekte mit erzielen. In bin
mir sicher, den Rest bekommst du allein hin

MfG

ThomaZ