Vertical Floating Div

I have vertical floating div:

If you want it fixed to the left hand side, instead of:

right: 446px;

use:

left: 0;

EDIT

I think i know what you are trying to achieve now - you want the sidebar to be in a fixed position relative to the div. Unfortunately, position: fixed can only be used to fix position based on the viewport.

you may have to use javascript for this. Here is your jsfiddle.net that I have modified to use some jQuery

ANOTHER EDIT

Here is an even better version that makes the transition smoother

ONE MORE OPTION in this one, the fixed div is fixed to the left at 82%. so it will always lie outside the content but the relative width will increase as the viewport width increases. The other way to do this is to have fixed width for the content (eg. 500px) the put the fixed div at left: 520px

fixed to left

Solution 2:

Here is a way of doing it with jQuery/JavaScript. Here is a working example: http://jsfiddle.net/KEeqe/11/

HTML:

<divid="wrap">Wrap Div</div><divid="twitter-tab"><imgsrc="http://washingtonbus.org/twitter_vertical.png"title=""/></div>

CSS:

#wrap{
    border: 2px solid rgb(0, 0, 0);
    width: 450px;
    height: 2101px;
    margin: 0 auto;

}
#twitter-tab{
    position: fixed;
    top: 0;
    left: 0;
    display: block;
}

jQuery / JavaScript:

$(function () {
    var pos = $('#wrap').position();
    var posTop = pos.top;
    var posLeft = pos.left + $('#wrap').outerWidth();
    $('#twitter-tab').css({'top' : posTop, 'left': posLeft});

    $(window).resize(function () {
        var posLeft = $('#wrap').position().left + $('#wrap').outerWidth();
        $('#twitter-tab').css({'left': posLeft});
    });
});

I edited my solution to allow the #wrap width to be changed in the CSS (no need to change in the JavaScript) and also to incorporate beno's window resize suggestion.

Solution 3:

You don't need JavaScript for this.

In your jsfiddle, you have a div that presumably contains your page content and a little twitter button that you want to have fixed to the right side of it. Since your content div is set to width: 80%, just give your twitter button left: 80%. It is off by a few pixels because of borders and padding, so use margin-left on the twitter button to fix it. In your jsfiddle, there's a 2px gap, so you will want to apply margin-left: -2px. Here's the simple, non-js fix: Tadah!

If you had a fixed width content div that was centered, you'd run into the same problem. The solution is similar: Position the twitter button in the center with a left margin that is half the width of the content, plus the border. So, if the content is fixed at 400px wide and centered, you'd position your twitter button thusly: left: 50%; margin-left: 202px. Tadah!

Solution 4:

Your viewport width changes every time vertical scrollbars appear and disappear which is the reason why you can't base your fixed positioning on the right side of the viewport.

You could use left instead of right if you are absolutely sure that your central content is not going to change in width however if you use horizontal centering you are in trouble again because you will never going to accommodate requirements for different screen resolutions (widths).

You could move that div to the left side of the viewport which is usually the position web developers choose to avoid problems like these or you could still put it where you want it however you would have to change your layout and probably use absolute or relative positioning.

Share