Bien établir son layout CSS ?

Bonjour, j'ai réalisé un site web mais je me rend compte que j'ai mal conçu les css; et, si ça passe bien sous firefox; je dois faire un tas de bricoles pour que l'affichage marche relativement bien sous IE.
J'aimerais clarifier un peu tout ça; nettoyer mon code.

Pourriez vous me donner quelques conseils pour que la base de mon layout soit OK ?

Voici l'idée :
1) barre grise qui reste au dessus (position:fixed)
2) logo qui reste au dessus (position:fixed)
3) marge latérale gauche (position:fixed)
4) div principal
5) menu en position:fixed
6) barre blanche en position:fixed
3A) bouton qui se colle au bord inférieur, au niveau horizontal du 3)
5A),5B),5C) boutons qui se collent au bord inférieur, au niveau horizontal du 5)
5D) collé au bord inférieur droit

EDIT par Felipe: Design trop large pour le Forum

Je me rend bien compte que l'ordre dans lequel on place les éléments, les marges, les padding... changent beaucoup de choses dans IE par rapport à FF. J'aimerais avoir ce layout clair et bien construit pour ensuite faire des trucs plus complexes après.
Merci beaucoup, beaucoup pour vos suggestions.

Gordie
Modifié par Felipe (05 Mar 2009 - 13:07)

Voilà j'ai recommencé mon layout à 0 pour simplifier.

J'ai mis une feuille de style spécifique pour gérer les position:fixed avec IE.
Mon problème est le suivant :

http://tinyurl.com/bklkrv/test.html

Pour une fois, tout est OK sous IE.
Par contre sous FF; la marge horizontale grise et la marge latérale gauche avec l'image ne s'affichent pas...

	<div id="page">
		<div id="header" class="fixed fixed-top">header</div>
			<div class="content">
		</div>
	</div>
	<div id="marge" class="fixed fixed-top">marge</div>
	<div id="margegrise" class="margeHZ fixed fixed-top">margegrise</div>
	<div id="margeblanche" class="margeHZ fixed fixed-bottom">margeblanche</div>	

Si dans mon code, je déplace #marge,#margegrise et #margeblanche au dessus de #page, ça fonctionne sous FF, par contre sous IE tout prend un décalage sur la droite et se positionne au même niveau que #page :

http://tinyurl.com/bklkrv/test2.html

	<div id="marge" class="fixed fixed-top">marge</div>
	<div id="margegrise" class="margeHZ fixed fixed-top">margegrise</div>
	<div id="margeblanche" class="margeHZ fixed fixed-bottom">margeblanche</div>	
	<div id="page">
		<div id="header" class="fixed fixed-top">header</div>
			<div class="content">
		</div>
	</div>

Comment régler ceci ?

Merci !
Modifié par gordie (05 Mar 2009 - 14:33)

Ok, résolu avec test.html en ajoutant

#marge,#margegrise {
	top:0;
} 

EDIT : ah non... ça marche pas en fait...
Modifié par gordie (05 Mar 2009 - 14:47)