javascript - CSS help request for DIV placement and scrolling -

i trying emulate 4 framed page divs, have encountered problems cannot resolve ... here quick sketch:

here css use style divs:

#wrapper {      width: 100%;      height: 90%;      margin: 0 auto; } #leftpane, #rightpane {     border: 1px solid black;     float: left;     color: white;     background-color: white;     height: 90%;     top: 5%;  } #leftpane {     position: absolute;     left: 0;     bottom: 0;     width: 50%;  } #rightpane {     position: absolute;     left: 50%;     bottom: 0;     right: 0;  } #topmenu {    position:fixed;    top:0px;    height:5%;    background-color: gray; } #footer {     position: fixed;     bottom: 0;     left: 0;     width: 100%; } 

and here divs create:

<div id="wrapper">     <div id="topmenu"></div>     <div id="leftpane"></div>     <div id="rightpane"></div> </div> <div id="footer"></div> 

the content of div set via ajax call , in fact happens entire page scrolls ... divs, text :(

i'd following behaviour: left , right divs scrollable independently each other , top menu , footer stay there regardless of in left/right panes , how text in them (right left/right pane content overwrites footer div if there text :( ).

(yes, before divs had page design frames there working (as expected :) ), due feature request needed switch div'd design. , please indulgent beginner level question :) ... learning css, javascript , web programming :) )

simple enough. added colors can see different boxes. you'll noticed had add few things make them visible, height. main thing need though overflow-y:auto z-index on header important otherwise covered when either of sides scrolls.

body {    margin: 0;    padding: 0;  }  #leftpane,  #rightpane {    position: absolute;    border: 1px solid black;    float: left;    color: white;    background-color: white;    top: 5%;    bottom: 5%;    overflow-y: auto;  }  #leftpane {    left: 0;    right:50%;    background: green;  }  #rightpane {    left:50%;    right: 0;    background: blue;  }  #topmenu {    position: fixed;    top: 0;    height: 5%;    width: 100%;    background: red;    z-index: 99;  }  #footer {    position: fixed;    bottom: 0;    height: 5%;    width: 100%;    background: orange;  }