Design étirable

Bonjour,

J'ai un souci qui reviens souvent dans mes sites et je ne trouve pas de solution à part faire un tableau, ce que je ne veux pas.

Je souhaite:
- une image à gauche en background-image d'1px de haut que je veut répéter en fonction du contenu
- un conteneur au milieu avec du texte et un background-color qui se répète
- une image à droite en background-image d'1px de haut que je veut répéter en fonction du contenu

Mon problème :
Le background-color s'étend bien en fonction de mon text mais, les deux images à gauche et à droite elle ne s'étendent pas !

Sur le css ci-dessous je n'est pas indiquer de background-repeat et une height de 100% mais j'ai déjà tester. L'image ne s'étend pas avec le texte si je n'indique pas un height de valeur fix.

HTML

        <!--** CONTENU **-->
        <div id="contenu">
        	<div id="contenu_haut_gauche"></div>
            <div id="contenu_haut"></div>
            <div id="contenu_haut_droite"></div>
            <div id="contenu_gauche"></div>
            <div id="contenu_blanc">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui 
                </p>
                </div>
            <div id="contenu_droite"></div>
            <div id="contenu_bas_gauche"></div>
            <div id="contenu_bas"></div>
            <div id="contenu_bas_droite"></div>
		</div>              
        <!--** FIN DU CONTENU **-->

CSS :

/* Mise en forme du contenu */
#contenu { width:760px; height:auto; float:left; margin-top:4px; margin-left:2px; overflow:hidden; }
#contenu_haut_gauche { width:5px; height:5px; float:left; background-image:url(images/design/bloc_haut_gauche.gif); overflow:hidden; }
#contenu_haut { width:750px; height:5px; float:left; background-image:url(images/design/bloc_haut.gif); overflow:hidden; }
#contenu_haut_droite { width:5px; height:5px; float:left; background-image:url(images/design/bloc_haut_droite.gif); overflow:hidden; }
#contenu_gauche { width:5px; height:395px; float:left; background-image:url(images/design/bloc_gauche.gif); }
#contenu_blanc { width:750px; height:395px; float:left; background-color:#FFF; } 
#contenu_droite { width:5px; height:395px; float:left; background-image:url(images/design/bloc_droite.gif); }
#contenu_bas_gauche { width:5px; height:6px; float:left; background-image:url(images/design/bloc_bas_gauche.gif); overflow:hidden; }
#contenu_bas { width:750px; height:6px; float:left; background-image:url(images/design/bloc_bas.gif); overflow:hidden; }
#contenu_bas_droite { width:5px; height:6px; float:left; background-image:url(images/design/bloc_bas_droite.gif); overflow:hidden; }
/* Fin de la mise en forme du contenu */

Petit screen :

Je ne sais pas si c'est très très clair mais je reste à votre disposition si vous souhaitez plus d'informations

Merci d'avance.
Modifié par ezora (09 Nov 2009 - 15:55)