View Full Version : Centering website even with scrollbar

07-30-2010, 11:42 AM
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!

07-30-2010, 01: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.

07-30-2010, 01: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?

07-30-2010, 01:37 PM
overflow-y: scroll;

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

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

07-30-2010, 02: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!

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

07-30-2010, 10: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.