CSS margin-auto when website is long than screen

[christophski]

Hi, I'm building a new website and I'm having problems centering the website. It work sfine most of the time but when the content goes off the bottom of the screen the website centres differently so some webpages don't align with the others. Please see these pages:

well aligned: http://demystifydesign.co.uk/christie/about.html

badly aligned: http://demystifydesign.co.uk/christie/chaplaincy.html

it also aligns badly if you reduce the size of your browser window so that the content is too long for the window.

Can anybody help me?

The CSS for the main container is this:

#container {
	background-color:#FFFFFF;
	margin-left:auto;
	margin-right:auto;
	margin-top:0px;
	margin-bottom:0px;
	position:relative;
	float:none;
	padding-top:20px;
}

[tracknut]

That's because your "long" pages are adding a scroll bar, so the browser has to squeeze your page width down by enough for the scroll bar. A common solution is to force a scroll bar on every page, even if it doesn't need one, via:

body {overflow:scroll}

Dave

[christophski]

thanks That should be fine for the moment.