Why does table moves when scrollbar shows?

[Pheddy]

Hi all!

I have created a page where the content resides inside a table that are aligned in the middle of the page using CSS

#bodydiv{
	margin-left: auto;
	margin-right: auto;
	width: 1000px;
	}

But when the content becomes big enough vertically the table expands longer that the screen and the browser enables its scrollbar. (No news there..)

This would be the same horizontally, but this is allmost never used, fairly because of bad user interface/interaction.

And offcourse the entire content moves just about 17 pixels. Is there a way to rearrange the table those 17 pixels to the right, fast enough that the users would'nt notice it? this would somehow require a function that realizes the content have been moved.

Or maybe there are an automatic function somewhere developed specificly for this that the browser response to?

[Bryan Cheung]

Do you have a online example?

Thats way we can help quicker.

[Pheddy]

No scroolbars:

http://www.itcenterfyn.dk/default.asp?pid=front

Scroolbars:

http://www.itcenterfyn.dk/default.asp?pid=products&GenreID=1

[Bryan Cheung]

Both pages has scrollbars for me.

[AutumnsDecay]

I see scrollbars on both, as well.

The scrollbar takes up a certain percentage of the window, and as such it will shift your content over when it's present.

I've never had a problem with users complaining about the content being shifted 17 pixels (or whatever the size is). You should be fine.

Another method would be to remove the scrollbar from your overall layout, and place a scrollbar within the table holding the data, though you'd likely want to place that table inside a div, and give the div a scroll bar by using the 'overflow:scrol l;' property.

[drhowarddrfine]

This is a common issue with all web content. The typical 'fix' is to just make sure scrollbars are always present.

[Pheddy]

I guess you are right. Making a div large enough to fill the horizontal area at all times, thought maybe there would be a default solution stored within the browser.. Have a good christmas eve everybody:)

[Pheddy]

By the way, my default browser is Chrome, but when viewing the site on my Iphone, Safari has a cool feature making the scrollbars viewable only when touching the screen to Scrool. Wouldt be usable in a mouse enviroment, but a cool feature none the less..

[drhowarddrfine]

You don't need to add a div to do this. Just make the html element taller than the viewport. There are two ways to do that:

html { min-height:101% }

html { min-height:100%; margin-bottom:1px }