Mise en page d'un site en css

Bonjour à tous,

J'ai actuellement mon site créé avec une mise en page en tableaux... et je voudrais tester la même chose uniquement en Css ainsi qu'avec des div mais je galère. Malgré pas mal de tutoriels lus je n'arrive pas à obtenir exactement ce que je veux et qui ressemble à cet exemple :
http://css.alsacreations.com/xmedia/exemples/maitriser/2cols_header_footer.png

Le problème dans le tuto d'Alsacréation c'est que le pied de page se trouve juste après le contenu et non pas en bas de la page lorsque le contenu ne prend pas toute la page...

Ce que je cherche à faire :

- Entête découpé en 3 parties :
-- La première de 200px positionné à gauche (même taille que le menu du dessous)
-- La deuxième variable (dépend de la taille de l'écran)
-- La troisième de 150px positionné à droite

- Pied de page identique à l'entête mais TOUJOURS en bas de la page quelque soit la taille du menu (partie verte) ou du contenu (partie grise)

J'arrive à faire ça avec des tableaux mais pas en Css pur
Bien sur je veux que ça fonctionne sur tous les navigateurs (ou au minimum FF et IE)

C'est surtout la découpe et le positionnement de l'entête que je n'arrive pas à faire.
J'utilise donc des tableaux...

Voici le Css que j'utilise actuellement :

/* --- GÉNÉRAL --- */
html, body
{
	margin: 0;
	padding: 0;
	height: 100%;
	background: #FFFFFF;
}

/* --- BLOC CONTENEUR GLOBAL --- */
div#page
{
	position: relative;
	/* permet au bloc de servir de référent pour ses descendants positionnés en absolu */
	width: 100%;
	margin: 0 auto;
	min-height: 100%;
}
/* Ne pas oublier les styles suivants, à appliquer au premier élément
   et au dernier élément (hors pied de page) du bloc conteneur */
div#page #premier-element
{
	margin-top: 0; /* évite tout risque de fusion des marges */
}
div#page #dernier-element
{
	margin-bottom: 0; /* évite tout risque de fusion des marges */
	padding-bottom: 7em;
	/* ATTENTION : cet espace doit permettre de placer le pied de page ! */
}

/* --- PIED DE PAGE --- */
div#piedpage
{
	position: absolute;
	bottom: 0; left: 0;
	width: 100%;
	/* pour que le bloc prenne toute la largeur du bloc de référence
	   Note : le bloc de référence est le plus proche ancêtre positionné
	   en relatif ou en absolu */
	height: 6em; /* Taille du pied de page */
}

Help.
Modifié par Bilgor Le Rouge (22 Apr 2008 - 18:33)

Personne n'a d'idée ?

Je ne sais pas si display: table-cell serait adapté dans ce cas, je n'ai pas encore testé.

Des infos ?

a écrit :

Ce que je cherche à faire :

- Entête découpé en 3 parties :
-- La première de 200px positionné à gauche (même taille que le menu du dessous)
-- La deuxième variable (dépend de la taille de l'écran)
-- La troisième de 150px positionné à droite

- Pied de page identique à l'entête mais TOUJOURS en bas de la page quelque soit la taille du menu (partie verte) ou du contenu (partie grise)

Je te conseille de jeter un œil aux gabarits proposés par Alsacréations.
On a tendance à se creuser bien trop la tête, alors que la solution est bien souvent ultrasimple...

http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS