2

I drew the problem so you can better understand it: the problem:

So, the question - is it possible to get the same position for both blue elements? I can't just add "padding-right" - in different OS/Browsers scrollbars can have different widths...

Is it possible to do with css? If not, is there a JavaScript solution to get the scrollbar element's width and center blue elements manually?

Tom Walters
  • 15,366
  • 7
  • 57
  • 74
avasin
  • 9,186
  • 18
  • 80
  • 127
  • I don't know of a way to do this, but it's an interesting question. The problem is that browsers consider the scroll bar to be outside the area of the scrolled element, and they don't provide any styling control or really even any indication that a scroll bar is present. That problem is compounded by the fact that most window-management systems allow user customization of scroll bar width, so you can't even rely on them being any particular size. – Pointy Jun 23 '12 at 14:33
  • This has got to be a SharePoint 2010 publishing page! – IrishChieftain Sep 05 '12 at 22:42

2 Answers2

3

You could add a invisible wrapper around the blue box that takes up all the space in the parent minus the width of the scroll bar. That would make the blue box the same size as in Container 2 all the time.

Logard
  • 1,494
  • 1
  • 13
  • 27
  • Sure, but how can i get the scrollbar width? Hm.. but maybe it will work if i will get difference in position between two elements * 2 & add padding it to first container. Seems very hacky, but should work... – avasin Jun 23 '12 at 14:35
  • But isn't the width of the scrollbar dependent of the OS/Browser/Configuration? – ZeissS Jun 23 '12 at 14:36
  • Yeah.. but we have a difference in elements position.. didn't thought about it before. But i don't like this solution really.. I don't why i don't trust it :) – avasin Jun 23 '12 at 14:39
  • Yeah, I agree. Its not an optimal solution, and I would be interested to know if there is a pure CSS way of solving this problem! :) – Logard Jun 24 '12 at 10:34
0

Just make the scrollbar always visible instead of trying to come up with a clever solution. Depending on your content/app the scrollbar is propably always visible 95% of the time (at least if was like this whenever I ran into such a problem).

ZeissS
  • 11,867
  • 4
  • 35
  • 50