Etirement vertical d'une image de fond dans des bloc

Bonjour à tous le monde,

Je suis un débutant en css et je galère depuis hier soir avec un design que je voudrai mettre en css.

Voila mon problème :

Je voudrai faire une sorte de tableau en css avec des balises div, avec dans la colonne de gauche un background qui descend, un bloc pour le contenu et la colonne de droite un background qui descend également.

Donc voila j'ai fait ca pour les css :

#bloc {
	color: #00000;
	background: #F4F4F4;
	width:816px;
}
div #cote_gauche{
	float:left;
	background-image: url(logo/bord_feuille_gauche.jpg);
	background-repeat: repeat-y;
	width:8px;
	height:100%;
}
div #cote_droit{
	float:right;
	background-image: url(logo/bord_feuille_droit.jpg);
	background-repeat: repeat-y;
	width:8px;
        height:100%;
}

Et j'ai fais ça pour le html :

<div id="bloc">
	<div id="cote_gauche"></div><div id="cote_droit"></div>
	ssssssssssssss<br />
        ssssssssssssssss<br />
        sssssssssssssssss
        ssssssssssssssssss
        Sssssssssssssssss<br />
        sssssssssssssssssss<br />
        sssssssssssssssssss<br />
        ssssssssss
</div>

Le probleme, c'est que je voudrai que le bloc s'etire vers le bas, et donc les images de fonds également, automatiquement selon le contenu qu'il comporte.
Mais le probleme est là. Je suis obliger de donner une hauteur au bloc #bloc pour que les images de fonds s'etire à la hauteur designer mais pas plus.
J'ai 'cafouiller' un peu a tous, et en mettant height:100% dans le body ca marchait, mais que sous IE sous firefox rien.

Donc voila mon probleme. J'espere que j'ai été assez clair.
Modifié par acronym (28 Apr 2006 - 04:00)

Hello ! As tu consulté l'article "les colonnes factices" du site pompage.net ?
Tu devra recourir à une astuce ... euh ... astucieuse dévoilée ici =>
clique ici pour tout savoir sur les colonnes
Un classique !
Modifié par Ralfman68 (28 Apr 2006 - 06:07)

Merci beaucoup pour ta réponse.

Donc voila j'ai reussit à faire un peu prés ce que je voulais, mais maintenant le probleme c'est que j'ai une marge de environ 10px, ce qui m'empeche de mettre une image par exemple.
Le css :

body{
	width:816px;
	margin:auto;
	text-align:center;
}

#cote_gauche {
	float:left;
	background: #F4F4F4 url(logo/bord_feuille_gauche.jpg) repeat-y 0%; 
}
#cote_droit{
	float:right;
	background: #F4F4F4 url(logo/bord_feuille_droit.jpg) repeat-y 100%;
}
#bloc{
	width:800px;
	clear:float;
	text-align:left;
}

Et l'html

<span id="cote_gauche">
<span id="cote_droit">
<div id="bloc">
gggggggggg
</div>
</span>
</span>

Donc voila mon autre probleme, j'ai tous essayer mais je n'arrive pas à enlever cette marge .

Tu te complique la vie avec tes deux colones alors que ton div bloc a une largeur fixe. Pourquoi ne pas faire une seule image de fond pour de div avec un padding correspondant pour placer tes images ?

#bloc {
	color: #00000;
	background: #F4F4F4;
	width:816px;
             background: url(logo/bord_feuille.jpg) repeat-y;
             padding-left: 8px;
             padding-right: 8px;
}

Si j'ai bien compris ce aue tu voulais faire ca devrait etre bon.

Ben en fait c'est 2 images differentes.
C'est pour faire un effet de feuille de papier, donc un fondu noir d'un cote et l'autre l inverse.
Donc je peut pas faire ca avec une seule image.

C'est bon j'ai réussi .
Merci à Ralfman68 et à Yasashii.

Donc j'ai du garder mes 2 colonnes pour afficher les images de fonds.

Voila le code css :

#cote_gauche {

	float:left;

	background:url(logo/bord_feuille_gauche.jpg) repeat-y 0%; 

}

#cote_droit{

	float:right;

	background:url(logo/bord_feuille_droit.jpg) repeat-y 100%;

}

#bloc{
	padding-right:8px;
	width:800px;
}

Voila en fait j'ai juste rajouté padding-right:8px sur #bloc.

Voila merci beaucoup a vous 2.
Par contre j'utilise beaucoup de balise div je pourrai mettre quoi a la place ?
Est ce que span est le meme que div ?
Vous avez pas des petits liens sympa qui parle de ca ?