Display table cell

Bonjour

j'ai un léger soucis avec la fonction display: table cell...
Voici déja la page de test en ligne comme ça vous verrez de suite le problème
http://www.ledn.be/V2/efe

En fait ce que je veux, c est une div principale dans laquelle viennent s'ajouter d autre div (header, footer, menu,...) et de part et d autre de cette div principale, se trouvent 2 div qui contiennent une image répété en y afin de créer une bande sur le coté qui fait toute ma page.
voici mon code actuel (celui présent sur la page)

<div id="main">
  <div id="col-gauche"></div>
  <div id="principal">
    <div id="header"><img src="design/img/banniere.jpg" /></div>  
    <div id="footer"><img src="design/img/font_footer.jpg" /></div>
  </div>
  <div id="col-droite"></div>
</div>

hmlt, body {
	background-image:url(design/img/fond_body.png);
	background-color:#000000;
	margin-top: 0px;
	background-repeat: no-repeat;
	background-position: center top;
}
#col-droite {
	background-image: url(design/img/barre_droite.jpg);
	width: 9px;
	background-repeat: repeat-y;
	background-position: left;
}
#main div {
	display:table-cell;
	width:1000px;	
	margin-right: auto;
	margin-left: auto;	
}
#principal {
}
#col-gauche {
	width: 9px;
	background-image: url(design/img/barre_gauche.jpg);
	background-repeat: repeat-y;
	background-position: right;
}

en fait ça fonctionne quand je n'ai qu'un élément dans ma div principale, mais si j'en rajoute plus, ça donne ce que vous voyez sur ma page...
Première fois que je tente de faire comme ça car avant je faisais en sorte d éviter ce probleme pour mon design mais là j me suis dit que j allais essayer pour apprendre donc mea culpa pour les erreurs

merci d avance à ceux qui m'aideront

ps: j ai fait un tour sur ce tuto http://www.alsacreations.com/tuto/lire/610-Mise-en-page-CSS-avancee-grace-a-la-propriete-display.html mais ça m'a pas plus aidé

Si tes div col-droite et col-gauche ne te servent qu'à mettre un fond, ce n'est pas la bonne méthode

Je vois quelque chose de plus simple :

<div id="main">
  <div id="principal"> 
    <div id="header"><img src="design/img/banniere.jpg" /></div>   
    <div id="footer"><img src="design/img/font_footer.jpg" /></div> 
  </div>  
</div>

body { 
    background-image:url(design/img/fond_body.png); /* tu peux ajouter les barres droite et gauche sur l'image même */
    background-color:#000000; 
    margin-top: 0px; 
    background-repeat: no-repeat; 
    background-position: center top; 
} 

#main {
    width:1000px;     
    margin-right: auto; 
    margin-left: auto; 
/* sinon tu peux créer un fond qui réunit les barres droite et gauche pour mettre en fond ici */    
} 

Je dois avouer ne pas trop comprendre pourquoi tu veux utiliser display : table-cell, cependant...

Bonjour,

#main div cible toutes les divs contenues dans #main ; pas la div#main !

Laurie-Anne a écrit :
Bonjour,

#main div cible toutes les divs contenues dans #main ; pas la div#main !

Tout à fait c'est pourquoi dans ma proposition je l'avais enlevée, mais je n'avais pas expliqué pourquoi, merci !

ok j essaye et je vous tiens au courant et j ai utilisé table cell afin que mes 2 colonnes aient toujours la meme taille que ma div principale

je test

super ta solution d'une image en arrière plan pour ma main AkaiKen je n'y avais absolument pas pensé ça fonctionne d'enfer un grand merci