Cómo dejar que un divir "pegajoso" fijo se quede fuera de la ventana gráfica

Question

Estoy tratando de seguir este tutorial: http://jqueryfordesigners.com/fixed-floating-elements/.

El problema es que cada vez que el posicionamiento fijo se aplica al DIV, si el ancho del navegador se cambia, los se mueven horizontalmente para que se ajusten dentro de la ventana gráfica. En el ejemplo del tutorial http://static.jqueryfordesigners.com/demo/fixedfloat.html Esto no sucede.

Este es mi código (todo está dentro de un #Wrapper de posición relativa):

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;
        }
    }
});

Puedes ver mi página aquí: http://www.brandcoffee.it/test/brandapart/iMagick.php

Answer 1

Pienso que eliminar right : 0; en #target debería hacer.

Answer 2

Intenta proporcionar el width atribuir ratio (or percent) rather than fixed pixel values. como :

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

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