Vertical floating div

I开发者_如何学编程 have vertical floating div:

 <div id="twitter-right-vrtical" style="position: fixed; bottom: 415px; right: 446px; display: block">
        <img src="/Content/themes/start/images/twitter.png" title=""/>
    </div>

When page content contains scroll the div perfectly attached to content:

But when page does not contains scroll there is a couple of pixels gap between floating div and page content:

How i may fix that?

I think i should check the position of content or check if there is a scroll on page and set position of div according with content dynamically using jquery?

simple demo here http://jsfiddle.net/KEeqe/8 just change height:1710px to 500px - 400px and you will see what i mean

Your div is in a fixed position from the right hand side of the viewport. If the scrollbar is removed, the viewport gets bigger so your div will move to the right by the width of the scrollbar.

I don't really know what you are trying to achieve here but it looks like you want to fix the div to the left hand side of the page. Please correct me if I'm wrong.

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

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

HTML:

<div id="wrap">Wrap Div</div>
<div id="twitter-tab">
    <img src="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.

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!

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.