align with right side of content
with visibility so you can see what's happening. This element has a scrollbar.

I have an element with a scrollbar and I want to line up the edge of another element with the content of the scrolled element. Scrollbars are different widths in different browsers. This is a hack to create a an invisible scrolled element to line up the real one with. It would be really nice to have some way of only using the scrolled hack element when the real scrolled one actually has a scrollbar, but that's beyond the scope of this test.

Below are the trials leading up the solution.