Fixed Div's stretching over entire screen, need each to occupy % of horizontal space

Question

I have 3 main div's that should split the screen horizontally (45%,10%,and 45% of width of screen). The left-most div(blue) contains a number of smaller divs(aqua) that need to remain static. The middle (green) and right-most (red) div should float down the page as the user scrolls, but should remain in their horizontal positions. I have set fixed heights for all div's as they will be kept to a certain vertical size.

I tried assigning fixed positions for the green and red div's but they move out of position and block the blue div's.

CSS

.PNMLB {
height: 400px;
font-style:italic;
overflow-y:scroll;
background-color:aqua;
border-style:double;}

HTML

<div class="MatchingDiv" style="width:100%">
            <div class="PNMListBoxes" style="width:45%; float:left;background-color:blue;">
                Left-most Div
                <!--generate programmatically?-->
                <div class="PNMLB" id="rank1">Rank 1<br/></div>
                <br/>
                <div class="PNMLB" id="rank2">Rank 2<br/></div>
                <br/>
                <div class="PNMLB" id="rank3">Rank 3<br/></div>
                <br/>
                <div class="PNMLB" id="rank4">Rank 4<br/></div>
                <br/>
            </div>
            <div class="Middle Div" style="width:10%;height:50px;float:left; background-color:lime;">Center Div</div>
            <div class="right div" style="overflow-y:scroll;height:400px;width:45%;float:right; background-color:red;">Right-most Div</div>

Answer 1

Please use the style position:fixed;right:0%; for right most div and position:fixed;right:45%; for center div

The working code snippet is given below:

<style>.PNMLB {
height: 400px;
font-style:italic;
overflow-y:scroll;
background-color:aqua;
border-style:double;}
</style>

<div class="MatchingDiv" style="width:100%">
            <div class="PNMListBoxes" style="width:45%; float:left;background-color:blue;">
                Left-most Div
                <!--generate programmatically?-->
                <div class="PNMLB" id="rank1">Rank 1<br/></div>
                <br/>
                <div class="PNMLB" id="rank2">Rank 2<br/></div>
                <br/>
                <div class="PNMLB" id="rank3">Rank 3<br/></div>
                <br/>
                <div class="PNMLB" id="rank4">Rank 4<br/></div>
                <br/>
            </div>
            <div class="Middle Div" style="width:10%;height:50px;float:left; background-color:lime;position:fixed;right:45%;">Center Div</div>
            <div class="right div" style="overflow-y:scroll;height:400px;width:45%;float:right; background-color:red;position:fixed;right:0%">Right-most Div</div>