help with positioning one div between a header an a footer

hi there,

I am facing a prob in my the following layout
---------------------
top div height is 140px
---------------------
| right div
|this div needs to scroll
|
----------------------
bottom div 200 px height
this div needs to stay at the bottom of the screen
------------------------

My problem is the following, i want to set my div#right just between the top and bottom and I want it to scroll because the text in there is too long, but somehow I can't manage to get this done...can someone help me... I tried to do it with setting a height for div#right but than I still have some space between the bottom div and my right div if I change my resolution...or view it a smaller size...
here is my css code:

body {
overflow-x:hidden;
overflow-y:hidden;
margin:0px 0px 0px 0px;
SCROLLBAR-FACE-COLOR: #ffffff;
SCROLLBAR-HIGHLIGHT-COLOR: #cccccc;
SCROLLBAR-SHADOW-COLOR: #999999;
SCROLLBAR-3DLIGHT-COLOR: #666666;
SCROLLBAR-ARROW-COLOR: #000000;
SCROLLBAR-TRACK-COLOR: #999999;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-decoration: none;
text-align:left;

}
#hoofdmenu {
position:absolute;
left:0px;
top:120px;
width:100%;
height:20px;
z-index:2;
visibility: visible;
}


#top{
position:absolute;
left:0px;
top:0px;
width:100%;
height:250px;
z-index:0;
background-image: url(../layoutpics/bovenheader.jpg);
border: 0px none #000000;
visibility: visible;
}

#bottom {
position:absolute;
left:0px;
bottom:0px;
width:100%;
height:250px;
z-index:0;
background-image: url(../layoutpics/bottom.jpg);
border: 0px none #000000;
}

#right {
top:140px;
right:0px;
bottom:140px;
overflow-x:no;
overflow-y:auto;
position:absolute;
border-style:none;
margin-right:0px;
width:450px;
z-index:3;
text-align:left;
padding:10px;
visibility:visible;
}