I have made a [JSFiddle](http://jsfiddle.net/ebisumartin/n1pkp6wy/1/) where I am trying to make a DIV stay fixed vertically in the viewport as the user scrolls, but stay under a header.

However, the fixed DIV, with the green border, pops over to the right edge of the viewport when you scroll down to the point where the Javascript kicks in.

How do I constrain the green DIV so that it stays within the red bordered containing DIV? Ideally its horizontal position would stay fixed relative to the right edge of the container.

CSS:

```
header {
   width: 100%;
    height: 10em;
    border: purple thin solid;
}
#container {
    border: thin solid red;
    position: relative;
    height: 100%;
    max-width:30em;
    margin: 0 auto 0 auto;
}
#staticRight {
    border: green thin solid;
    display: inline-block;
    float: right;
    right: 0;
    margin: 2em 0 0 0;
    width: 120px;
    height:600px;
    font-size: .82em;
    line-height:2em;
}
article {
    border: blue thin solid;
    max-width: 20em;
}

```

Javascript:

```
var elementPosition = $('#staticRight').offset();
$(window).scroll(function () {
    if ($(window).scrollTop() > elementPosition.top) {
        $('#staticRight').css('position', 'fixed').css('top', '0');

    } else {
        $('#staticRight').css('position', 'static');
    }
});

```