This is an old problem. This is default browser behavior: when you have centered content that does not extend below the bottom of the browser window, there is no need for a scrollbar. However, when content does extend below, a vertical scrollbar appears, thus shifting the content. This renders a seeming horizontal jump of content. Some customers care about this jump, others don't. Guess which one I'm addressing today.
The brute force fix is to redefine the topmost object:
html {
overflow-y: scroll;
}
But I don't like always having a scrollbar.
My guess is there's a jquery method that will add the width of a scrollbar (probably a browser dependent issue, isn't it) that would insert a div-like object to the rightmost if the content isn't greater than the browser window.
Or, maybe, a better way?
Thanks!
Kyle
Comments
not 100% sure this would
not 100% sure this would work, but it's an idea.
I am guessing that right now you have something like this (I'm using inline style to illustrate)
<div class="container" style="width: 300px; height: 300px; overflow: automatic;"><!--variable length content-->
</div>
I would try this:
<div class="container" style="width: 300px; height: 300px; overflow: automatic;"><div class="inner-container" style="width: 280px; height: auto; overflow: visible;">
<!--variable length content-->
</div>
</div>
The width of inner-container being equal to the width of container minus the width of a scroll bar plus 5px or so.
Clever, but…
Clever; I'm using the genesis theme; this is something like:
#container#skip-nav
#header
#columns
The rub being that #container has the "margin: 0 auto" definition for horizontal centering, and setting the three contained divs to "width-13px" (for example) only offsets the positioning of the children divs, container still bounces horizontally.
You can see the development site here: http://168.75.111.17/
The client seems content with the overflow-y: scroll solution, but I remain piqued to find a better answer overall.
Thanks! — Kyle