PDA

View Full Version : Centering website even with scrollbar


titous
07-30-2010, 12:42 PM
Hello everyone,

I've started designing my first website in Dreamweaver CS3 and am having a little trouble fine tuning the alignment of my website.

I center all my content with the body text set to center and a div.wrapper that has a margin-left and margin-right set to auto. This seems to be working very well for me on the pages which do not have a vertical scroll bar. However, on the blog part of my website, when I've tested a long blog post which makes a scroll bar appear, the alignment shifts a bit to the left since the screen now has a different width due to the scroll bar. Does anyone have any ideas on how to get around this?

Thank you!

Corrosive
07-30-2010, 02:01 PM
No way round it I'm afraid. It is the scrollbar (approx 8px or so wide) that is causing your content to 'jump' a little. I guess your only real option is to have a scrollbar there permenantly even if the content is less than a page length. Maybe set the CSS of body to overflow: scroll; but I'm not sure if that will work or how it will appear cross-browser.

titous
07-30-2010, 02:06 PM
i'm afraid that was going to be the answer. :(

i set the overflow in the body to scroll, and it seems to be working. however, is it possible to force only a up/down scroll bar instead of both?

Corrosive
07-30-2010, 02:37 PM
Try;
overflow-y: scroll;

but again, not sure how cross-browser that is.

titous
07-30-2010, 02:54 PM
Great! Seems to be working in FF, however I'm getting dual scroll bars in IE. Is there a workaround for this?

titous
07-30-2010, 03:02 PM
Great! Seems to be working in FF, however I'm getting dual scroll bars in IE. Is there a workaround for this?

I found a workaround for those interested. Instead of changing the overflow, I simply added the following code to my style sheet: html, body { min-height:101%; }

Thanks for all the help Corrosive!

Corrosive
07-30-2010, 03:53 PM
Good stuff. Thanks for coming back with the solution as well :)

Ricky55
07-30-2010, 11:29 PM
Full screen cast here on the subject with a few different approaches depending on the browser.

I must admit it can be annoying this.

http://css-tricks.com/video-screencasts/4-forcing-scrollbars-eliminating-horizonatal-jumps/