Question

http://jsfiddle.net/DAFHq/1/

<div id="gray-box">
<div id="red-box"></div>
</div>

I need the RED square to be positioned 20px to the right of the gray box with scrolling content in it, while keeping it vertically aligned in the center.

It should remain positioned relative to the gray box while scrolling and when the screen is resized.

Any ideas? The jsFiddle is one I found and modified to show what I need, The vertical align is perfect, but I have no idea howto position it how I need it horizontally.

Maybe something with jQuery?

Answer 1

Try this:

var positionFoo = function() {
  $('#foo').css({
    'left': $('#bar').offset().left + $('#bar').width() + 20 + 'px',
    'top': ($(window).height() / 2) - ($('#foo').height() / 2)
  });
};

$(window).resize(positionFoo);
positionFoo();

You will also need to add position: fixed; to #Foo.

Updated fiddle