How to let a fixed “sticky” div stay outside the viewport

Question

I'm trying to follow this tutorial: http://jqueryfordesigners.com/fixed-floating-elements/.

The problem is that whenever the fixed positioning is applied to the div, if the browser width gets changed the div moves horizontally to fit inside the viewport. In the tutorial example http://static.jqueryfordesigners.com/demo/fixedfloat.html this does not happen.

This is my code (everything is inside a relative-positioned #wrapper):

CSS:

        #cart {
            position: absolute;
            right: 0;
            width: 270px;
        }

        #target {
            width: 270px;
            height: 200px;

            background-color: blue;
            background-position: 50% 50%;
            background-repeat: no-repeat;

            position: absolute;
            top: 250px;
            right: 0;

            padding: 0;
            border-radius: 15px 15px 0 0 ;
        }

        #drag-here {
            width: 270px;
            height: 0;

            background-image: url(drag-here.png);
            background-repeat: no-repeat;
            display: none;

            position: absolute;
            top: 470px;
            right: 0;
        }

        #cart-list {
            display: none;
            position: absolute;
            top: 430px;
            right: 0;

            list-style-type: none;
        }

        .sticky #target {position: fixed; top: 5px;}
        .sticky #drag-here {position: fixed; top: 225px;}
        .sticky #cart-list {position: fixed; top: 185px;}

HTML:

<section id="cart">
    <div id="target" class="target-listen"></div>
    <div id="drag-here"></div>
    <ul id="cart-list">
    </ul>
</section>

JQuery:

sticky = false;
initialOffset = $("#target").offset().top - 5;
$(window).scroll(function () {
    if ($(this).scrollTop() >= initialOffset) {
        if (!sticky) {
            $("#cart").addClass("sticky");
            sticky = true;
        } 
    }
    else {
        if (sticky) {
            $("#cart").removeClass("sticky");
            sticky = false;
        }
    }
});

You can see my page here: http://www.brandcoffee.it/test/brandapart/imagick.php

Answer 1

I think removing right : 0; in #target should do.

Answer 2

Try with providing the width attribute in ratio (or percent) rather than fixed pixel values. such as :

width:25%; //for #target, and
float:right; //make target float right

width:75%; // for other contents on left side