CSS largueur fixe = centrage par rapport au mauvais élément

Bonsoir

Je suis en train de coder une page et voici un petit aperçu :

http://www.cjoint.com/data3/3BiaKyFdkO6.htm

Ma page est composée d'une grande div jaune à hauteur fixe, à l'intérieur j'ai placé 2 div qui font les 2 colonnes (rouge et bleu). A gauche dans la rouge je peux mettre par exemple des boutons ou un menu et à droite du contenu.

Le problème c'est qu'à droite j'ai besoin de mettre des div de taille fixe. Rien de compliqué dans toutes les pages que j'ai fais sans cette structure à 2 colonnes mais ici le fait d'appliquer une largueur fixe fait que la div se centre par rapport à la page ... et non par rapport à la div bleu dans laquelle elle se trouve.

Voici le code de la div rose correctement centrée :

echo "<center><div style='background-color:pink;z-index:5000;'>ooooo</div></center>";

Et voici le code de la div grise qui est identique à celui de la rose à la seule différence près qu'il y a une largueur fixe :

echo "<center><div style='background-color:gray;z-index:5000;width:400px;'>ooooo</div></center>";

Pour information, voici le code CSS des 3 autres div dont j'ai parlé :

.page {
 padding-left: 15px;
 padding-right: 15px;
 position: relative;
 background-color: yellow;
 height: 1500px;
}

.bandeau_gauche {
 height: 100%;
 background-color: red;
 display: inline-block;
 width: 35%;
 max-width: 200px;
 float: left;
 text-align: center;
}

.bandeau_droite {
 height: 100%;
 background-color: blue;
 display: block;
 vertical-align: middle;
}

C'est la première fois que mettre une largueur fixe m'empêche de centrer une div par rapport à la position de celle qui la contient ...
Pouvez vous m'aider ?

Merci d'avance


Edit : Je suis arrivé à centrer un élément dans la div bleu et centrage par rapport à la div bleu, ça c'est bon.

Le soucis c'est que maintenant mon bleu possède une largueur fixe ... et donc forcément ça ne s'adapte pas à l'écran.

http://www.cjoint.com/data3/3BicsHLYgPB.htm

Voici le code actuel :

.page {
	padding-left: 15px;
	padding-right: 15px;
	position: relative;
	background-color: yellow;
	height: 1500px;
}

.bandeau_gauche {
	height: 100%;
	background-color: red;
	display: inline-block;
	width: 35%;
	max-width: 200px;
	float: left;
	text-align: center;
}

.bandeau_droite {
	height: 100%;
	background-color: blue;
	display: block;
	vertical-align: middle;
	width:1000px;
	position:relative;
	left:200px;
}

Le plus simple serait 100 % de largueur pour le bleu mais alors il prend la même largueur que la page et donc déborde à droite ... il faudrait qu'il ait la largueur de la page - les 200 pixels du rouge ...