Question

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

Answer 1

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!