Content shifts when scroll bar appears

[ed]

I have a new site with a mix of page lengths. When switching between
pages the content can shift depending on whether the scroll bar is
displayed or not.

This is very unpleasant and I have had to give .container a 5px left
margin to fix it in place, which kind of spoils the appearance.

Is there a work around for this? I can't believe I'm the first person
to come across this issue.

[Goulven CHAMPENOIS]

Does this article answer your question ?
http://www.456bereastreet.com/archive/200905/the_mysterious_sideways_jump_aka_scrollbar_present_or_not_present/

On Tue, May 26, 2009 at 12:09 PM, ed <edu...@gmail.com> wrote:

I have a new site with a mix of page lengths. When switching between
pages the content can shift depending on whether the scroll bar is
displayed or not.

--
Goulven Champenois

[Christian Montoya]

I think you are not the first person to come across this issue, but
the first to consider it a problem.

--
--
Christian Montoya
mappdev.com :: christianmontoya.net

[ed]

@Goulven: the article confirmed what I already knew which is that the
appearance of a scroll bar caused the layout to jump about.

@Christian: really? the shift in an otherwise centred layout was
really noticeable and was, to myself and my client, unacceptable.

FWIW I discovered this on another forum, I added the following to my
CSS after the blueprintcss files

html {overflow-y: scroll}

TBH I don't understand what exactly this does but it seems to have the
desired effect. On my Mac this works for FF and Safari, On Linux it
works on FF/Centos 5.3, I have yet to hear back about IE7 (for this
project we are leaving IE6 to its own devices).

On May 26, 1:19 pm, Christian Montoya <siro...@gmail.com> wrote:

[ed]

Ho hum, think first, post second.

It looks like it always draws the vertical scroll bar whether or not
it is needed. So I guess you have the choice of a needless scroll bar
sometimes or content shifting about sometimes.

[saquino]

I believe this also works:
html { margin: 0 0 1px 0; min-height: 100%;}

and I don't think there's an alternate to not always having a
scrollbar to prevent the shift unless of course you don't center the
page.

sean

[ed]

I'll give that a try, I think you're right, I was just a bit surprised
that (so far as I could tell by searching) this phenomenon didn't seem
to bother anyone else.

[Christian Montoya]

On Tue, May 26, 2009 at 9:55 AM, ed <edu...@gmail.com> wrote:

> @Christian: really? the shift in an otherwise centred layout was
> really noticeable and was, to myself and my client, unacceptable.

This is a classic case of not looking at enough websites! I've seen
this thread many times before on other CSS related lists and the end
result is always the same... you either have a scrollbar on the page
or you don't, and depending on whether it is there or not, the size of
the viewport changes. Can't do very much about that! Either way, the
content really does center correctly, just not the same in both cases.

[G. D. Speer]

html {overflow-y: scroll}
TBH I don't understand what exactly this does

It's setting a rule for the HTML element which frames the entire page that
when
the content overfloys the boundaries of the container in the vertical
direction,
to use a scroll bar to display all of it. In most browsers, it triggers the
DOM
to reserve space for the scrollbar to avoid reflow if the content
dynamically
changes length via Ajax, document.write, etc.

An old/hackish workaround was to append enough invisible content to short
pages
to always exceed the vertical length.

--------------------------------------------------------------------------------



No virus found in this incoming message.
Checked by AVG - www.avg.com
Version: 8.5.339 / Virus Database: 270.12.39/2133 - Release Date: 05/25/09
08:16:00