Creation cadre dynamique 100% div/css

Bonjour tout le monde, j'espère qu'on pourra m'aider car je suis confronter à un problème assez casse tête.

Voilà je désirs crée un site auquel j'ai un bloc gauche un centre et un à droite
Le problème c'est que je remarque une incohérence au niveau de i6 et ff2 sans oublier une impossibilité à faire répété mon image dans la partie contenu.

voici la partie code lié à mon problème:

<div id="content">
  <div id="right"></div> 
  <div id="left"></div>  
  
  <div id="contenu">
    <div class="main">
      <div id="hautGauche"></div>
      <div id="hautCentre"></div>
      <div id="hautDroit"></div>
    </div>
    <div class="main">
      <div id="centreGauche"></div>
      <div id="centre">
      <div id="centreDroit"></div>
    </div>
    <div class="main">
      <div id="basGauche"></div>
      <div id="basCentre"></div>
      <div id="basDroit"></div>
    </div>
  </div>

</div>

Voici le fichier css:

#content {
	width: 990px;
}

#left {
	width: 196px;
	float: left;
}

#right {
	width: 196px;
	float: right;
}

#contenu {
	width: auto;
	height: auto;
}

#hautGauche {
	width: 14px;
	height: 42px;
	float: left;
	background: url(../images/top_right.jpg) no-repeat;
	font-size:1px; /* correction d'un bug IE */
}

#hautCentre {
	width: auto;
	background: url(../images/top.png) repeat-x;
	float: left;
}

#hautDroit {
	width: 13px;
	height: 42px;
	float: right;
	background: url(../images/top_left.jpg) no-repeat;
	font-size: 1px; /* correction d'un bug IE */
}

#centreGauche {
	width: 14px;
	float: left;
	background: url(../images/left.jpg) repeat-y;
	font-size: 1px; /* correction d'un bug IE */
}

#centre {
	background: #F0FFF0;
	float: left;
}

#centreDroit {
	width: 13px;
	float: right;
	background: url(../images/right.png) repeat-y;
	font-size: 1px; /* correction d'un bug IE */
}

#basGauche {
	width: 14px;
	height: 13px;
	float: left;
	background: url(../images/bot_left.png) no-repeat;
	font-size: 1px; /* correction d'un bug IE */
}

#basCentre {
	height: 13px;
	float: left;
	background: url(../images/bot.png) repeat-x;
	font-size: 1px; /* correction d'un bug IE */
}

#basDroit {
	width: 13px;
	height: 13px;
	float: right;
	background: url(../images/bot_right.png) no-repeat;
	font-size: 1px; /* correction d'un bug IE */
}

et voici un shéma de la partie qui m'est difficile à faire:



Le hic c'est que j'ai sous ie6 les bloc gauche centre et droite à leurs place, par contre un problème entre les cotés basDroite et basGauche

Sous ff2 le bloc centre est en dessous des float right et left

Et sur les 2 navigateurs, je constate une absence des répétition d'images entres les coté du bloc centre (centreGauche, centre Droite, basCentre, hautCentre) je pense que la taille des cotés se fait si un contenu existe...

Voici le shéma complet de se que j'ai du mal à faire


Merci beaucoup de votre aide d'avance
Modifié par wantmaster (30 Aug 2007 - 16:00)

Bonjour et bienvenue parmi nous

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation

Bonjour,j'espère que j'ai bien rectifier

Merci de me l'avoir dis, c'est plus compréhensible, et encore desolé pour l'oublie.

Je tiens à dire que certain liens montre plusieurs possibilités mais voilà je n'ai pas trouver un cadre fluide en hauteur mais aussi en largeur, ce qui est mon cas.

Voici un liens qui présente presque se que je veux:

http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html

Dans se liens on ne traite pas une fluidité sur la largeur. Mon cadre est composé de 4 images pour les coins et de 4 autres sur les cotés qui s'élargisse suivant la hauteur du contenu du bloc centre.

Mes bloc gauche et right correspond à des menus particulier et qui s'affiche dans certain cas, dans d'autre cas le bloc centre prend toute la taille du parent (bloc content).

Dernière chose... possible de gérer celà en position:absolute????

Par contre si sa semble si dur que sa, dois-je faire se design sous forme de tableau (9cellules)
Pas évident et pourtant sa semble simple..
Modifié par wantmaster (30 Aug 2007 - 17:08)

Bon je viens de faire pas mal de recherche et une personne c'est penché sur se problème... à propos d'un cadre étirable des 2 sens par rapport au contenu.

Voici le lien:

http://www.ljouanneau.com/standards/css/cadre/

Par contre je refais la même chose avec mes propre image, sous ff2 nikel mais sous ie6 je constate les 2 coins basGauche et bas Droite remonté un peu et je vois les coté centreGauche et centreDroit descendre de 13px..? Alala serieux si c'est pas ff2 c'est ie6 qui merde