css - One div scrollable and other fixed -

i having css issue; see attached image.

enter image description here

there have 2 fixed div.. put navigation , yellow area content area. content area scroll if content big..

but problem facing content area position not fit properly. when make other 2 div position: fixed issue coming. please see code , jsfiddle..

.midarea div position not fit there. if see jsfiddle can under properly..

you need .midarea fixed match others:

.midarea {     position: fixed;     left:260px;     right: 0;     height: 100%;     overflow: auto;     ... }

with float , width obsolete (but can have them if want).

also please, please lose every z-index , every float position: fixed or position: absolute.

Test