Scrollbar con css corre contenido a la izquierda

[alapaco]

Tengo un sitio que tiene fijo el header y donde al resto de la página se le puede hacer scroll, esto lo hice y anda fenomenalmente con código de los tutoriales que publicaron en este foro.
El problema es que si en una página necesita mostrarse la barra de scroll se corre el contenido unos pixeles hacia la izquierda por la inserción de la barra, logicamente esto me provoca que el contenido quede descentrado con respecto al header.

Hay forma de solucionar esto ??
Les dejo el código que uso, gracias de antemano!

Este es el código base de mi index.php:

Código HTML:

<div>
	<div id="tope"></div>
	<div align="center" id="fijo">
		<div id="header"><? require_once("header.php") ?></div>
		<div id="menu"><? require_once("menu.php") ?></div>
		<div align="left" id="title" style="display: none; height: 0;"><? require_once("title.php") ?></div>
	</div>
	<div align="center" id="footer"><div id="footerIn"><? require_once("footer.php")?></div></div>
	<div id="content"><div id="contentIn"><? require_once(GetPagePath($pageid))?></div></div>
</div> 

Y este es el css basico:

Código:

* {
	margin: 0;
	padding: 0;
}

html, body {
	background-color: #FFF;
	height: 100%;
	overflow: hidden;
	width: 100%;
}

#content {
	left: 0;
	overflow: auto;
	top: 0;
	width: 100%;
	z-index: 1;
}

#contentIn {
	margin: 0 auto;
	margin-top: 12px;
	width: 768px;
}

#fijo {
	height: 108px;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 0;
}

#footer {
	bottom: 0;
	height: 32px;
	position: absolute;
	width: 100%;
	z-index: 5;
}

#footerIn {
	margin:0 auto;
	width: 768px;
}

#header {
	background: #E7E7E7;
	height: 66px;
	left: 0;
	margin-top: 4px;
	top: 4px;
	width: 770px;
	z-index: 2;
}

#menu {
	background: #FFF;
	height: 24px;
	margin-bottom: 4px;
	margin-top: 4px;
	width: 100%;
	z-index: 3;
}

#title {
	background: #00A4E4;
	height: 44px;
	width: 770px;
	z-index: 3;
}

#tope {
	height: 108px;
	top: 0;
}