Fixed Div Does Not Go Beyond The Screen's Right Edge

Fixed position div not staying contained in wrapping div, overlays entire screen?

An element with fixed position is positioned relative to the viewport. Fixed positioned elements are removed from the normal flow. The document and other elements behave like the fixed positioned element does not exist.

Although you declare position:fixed;, you don't specify a value for the top and left properties. The default value for both properties is auto, which lets the browser calculate the top edge and left edge positions. The calculated edge positions turn out to be the element's top and left edge positions in the normal flow, which is why it moves when you set a margin.

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

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>

Fixed position but relative to container

Short answer: ~~no.~~ (It is now possible with CSS transform. See the edit below)

Long answer: The problem with using "fixed" positioning is that it takes the element out of flow. thus it can't be re-positioned relative to its parent because it's as if it didn't have one. If, however, the container is of a fixed, known width, you can use something like:

#fixedContainer {
  position: fixed;
  width: 600px;
  height: 200px;
  left: 50%;
  top: 0%;
  margin-left: -300px; /*half the width*/
}

http://jsfiddle.net/HFjU6/1/

Edit (03/2015):

This is outdated information. It is now possible to center content of an dynamic size (horizontally and vertically) with the help of the magic of CSS3 transform. The same principle applies, but instead of using margin to offset your container, you can use translateX(-50%). This doesn't work with the above margin trick because you don't know how much to offset it unless the width is fixed and you can't use relative values (like 50%) because it will be relative to the parent and not the element it's applied to. transform behaves differently. Its values are relative to the element they are applied to. Thus, 50% for transform means half the width of the element, while 50% for margin is half of the parent's width. This is an IE9+ solution

Using similar code to the above example, I recreated the same scenario using completely dynamic width and height:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
}

If you want it to be centered, you can do that too:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Demos:

jsFiddle: Centered horizontally only

jsFiddle: Centered both horizontally and vertically

Original credit goes to user aaronk6 for pointing it out to me in this answer

how to fix div button to right of screen?

The child divs should move with the parent, so remove any position css for the child divs.
For the parent, try using viewport units (vh, vw). This will ensure that the position is always relative to the viewport.
Parent div css:

.help-parent {
position: absolute;
top:0;
left:95vw;
}

CSS to keep element at fixed position on screen

You may be looking for position: fixed.

Works everywhere except IE6 and many mobile devices.

Can I position an element fixed relative to parent?

Let me provide answers to both possible questions. Note that your existing title (and original post) ask a question different than what you seek in your edit and subsequent comment.

To position an element "fixed" relative to a parent element, you want position:absolute on the child element, and any position mode other than the default or static on your parent element.

For example:

#parentDiv { position:relative; }
#childDiv { position:absolute; left:50px; top:20px; }

This will position childDiv element 50 pixels left and 20 pixels down relative to parentDiv's position.

To position an element "fixed" relative to the window, you want position:fixed, and can use top:, left:, right:, and bottom: to position as you see fit.