fixed header en verticaal scrollen HTML5

[janyep]

Hallo
ik probeer http://www.cssplay.co.uk/layouts/flexible-3column-flex-flex-fix.html aan te passen.
De middelste 3 kolommen staan in de "wrapper" naast elkaar

body {word-wrap:break-word;}
#top {background:Maroon;}
#footer {overflow:hidden; background:OliveGreen;}

#wrapper {overflow:hidden; background:LightGray;}
#outer1 {float:left; width:30%; background:LavenderBlush;} /* width kan ook in px */
#outer2 {background:LightYellow; margin-right:200px; margin-left:30%; padding:10px;} /* indien width outer1 in px, dan margin-left ook in px */
#outer3 {float:right; width:180px; padding:10px; background:LightGray;}
#outer1, #outer2, #outer3 {padding-bottom:32767px; margin-bottom:-32767px;}

<!--[if lte IE 7]>
<style type="text/css">
body {word-wrap:break-word;}
#outer2 {display:inline; float:left; margin-left:0; margin-right:0;}
#wrapper {display:inline-block;}
</style>
<![endif]-->

*. de bovenste rode balk wil ik graag "vast zetten" : dit stukje zou niet mogen wegscrollen. Dus:

body {word-wrap:break-word;}
#top {background:Maroon;
position:absolute;
display:block;
width:100%;
height:120px;
overflow:hidden; }
#footer {overflow:hidden; background:OliveGreen;}


#wrapper {overflow:hidden; background:LightGray;
position:absolute;
top:120px;}
#outer1 {float:left; width:30%; background:LavenderBlush;} /* width kan ook in px */
#outer2 {background:LightYellow; margin-right:200px; margin-left:30%; padding:10px;} /* indien width outer1 in px, dan margin-left ook in px */
#outer3 {float:right; width:180px; padding:10px; background:LightGray;}
#outer1, #outer2, #outer3 {padding-bottom:32767px; margin-bottom:-32767px;}

<!--[if lte IE 7]>
<style type="text/css">
body {word-wrap:break-word;}
#outer2 {display:inline; float:left; margin-left:0; margin-right:0;}
#wrapper {display:inline-block;}
</style>
<![endif]-->

*. Dit lukt, maar dan ben ik de footer kwijt. Dus:

body {word-wrap:break-word;}
#top {background:Maroon; position:absolute; display:block; width:100%; height:120px; overflow:hidden; color:#fff;}
#footer {overflow:hidden; background:OliveGreen;
position:absolute;
margin:0;
bottom:0;
left:0;
width:100%;
height:auto;}


#wrapper {overflow:hidden; background:LightGray; position:absolute; top:120px;}
#outer1 {float:left; width:30%; background:LavenderBlush;} /* width kan ook in px */
#outer2 {background:LightYellow; margin-right:200px; margin-left:30%; padding:10px;} /* indien width outer1 in px, dan margin-left ook in px */
#outer3 {float:right; width:180px; padding:10px; background:LightGray;}
#outer1, #outer2, #outer3 {padding-bottom:32767px; margin-bottom:-32767px;}

<!--[if lte IE 7]>
<style type="text/css">
body {word-wrap:break-word;}
#outer2 {display:inline; float:left; margin-left:0; margin-right:0;}
#wrapper {display:inline-block;}
</style>
<![endif]-->

*. Nu is de footer terug, maar hij lijkt "vast te staan" : de tekst va nde wrapper kruipt er onder door terwijl de footer doodleuk omhoog scrollt. Dus wat nu?
*. Het lukt me ook niet om de drie kolommen die in de wrapper naast elkaar staan, onafhankelijk van elkaar verticaal te laten scrollen indien nodig ...

weet iemand raad? Zou er heel blij mee zijn!

In ieder geval bedankt voor het lezen ... :shocked: !!
Groeten janyep