Colonne centrale fixe entourée de colonnes extensibles

Re-bonjour,

Me voilà confrontée à un nouveau problème. J'ai trouvé plein de tutos expliquant comment faire un design 3 colonnes avec 2 colonnes latérales fixes et une colonne centrale extensible (remplissant le vide), mais moi je cherche le contraire, soit comment faire un design avec une colonne centrale fixe et 2 colonnes latérales remplissant le vide restant, donc extensibles suivant la résolution du visiteur.

Je vous joins une image explicative:


sachant que les parties 1, 4 et 7 ont toutes une taille de 800 px de large, je voudrais que les parties 2, 5, 3 et 6 remplissent le vide restant de chaque côté, mais si j'y arrive à peu près sur IE, le résultat est catastrophique sur FF.

Voici mon code css

body {
background-color: #FAEBD4;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
}

#avantbannierebleu {
background-color: #dfefdc;
float: left;
height: 125px;
width: 40%;
}

/*Pour centrer un élément en CSS, il faut fixer sa bordure gauche au centre de la page avec position: absolute et left 50%,
puis, fixer la marge de la boite en négatif à la moitié de la largeur de la boite, l'image faisant ici 800 px, la margin-left est
fixée en négatif à -400px */
#banniere {
position: absolute;
left: 50%;
margin-left: -400px;
}

#apresbannierejaune {
background-color: #e9e5ae;
float: right;
height: 125px;
width: 40%;
}

#avantmenubleu {
background-color: #dfefdc;
float: left;
height: 69px;
width: 40%;
clear: both;
}

#menu {
position: absolute;
left: 50%;
top: auto;
margin-left: -400px;
}

#apresmenujaune {
background-color: #e9e5ae;
float: right;
height: 69px;
width: 40%;
}

#sitename {
text-align: center;
}

et mon code html:

<div id="avantbannierebleu">&nbsp;</div>
	<div id="banniere"><img src="images/a2.gif" border="0"></div>
	<div id="apresbannierejaune">&nbsp;</div><br>
	
	<div id="avantmenubleu">&nbsp;</div>
	<div id="menu"><img src="images/a3.gif" border="0"><img src="images/a4.gif" border="0"><img src="images/a5.gif" border="0"><img src="images/a6.gif" border="0"><img src="images/a7.gif" border="0"><img src="images/a8.gif" border="0"><img src="images/a9.gif" border="0"></div>
	<div id="apresmenujaune">&nbsp;</div>
	
	<div id="sitename"><img src="images/a10.gif" border="0"></div>	

Merci d'avance pour vos conseils.
A+

Hello,

Personne n'a une idée à me suggérer ?


Suis-je obligée de faire des tableaux dans ce cas ?

Merci

Bonjour,

L'image n'est pas accessible.

Sinon, à chaque fois que j'ai croisé des demandes de colonne centrale et colonnes latérales qui occupent le restant de la place il s'agissait en fait de créer une seule colonne de contenu, et d'avoir des images de fond de décoration sur les côtés. Ce qui ne se fait pas avec trois blocs disposés en colonnes.