Colonne de meme longeurs avec des position relative

Bonjour,

Ma question va vous paraître simple pour certain, mais est-il possible de faire des colonnes de même longue sachant que chacune d'elles ont une position Relative ?

J'explique :

J'ai 3 colonnes (DIV) en position relative qui sont dans un "content" de 1000 px de large les une à cotés des autres.
la première : 620 px --> z-index de 1
la deuxième : 240 px --> z-index de 10
la troisième : 160 px --> z-index de 1

Total = 1020 px

la deuxième doit superposer les deux autre de 10px de chaque coté.
Ce qui remet toutes les div dans les 100px du "content".

Dans mon cas si j'ai un contenu plus longue dans la première DIV, la deuxième et la troisième ne s'agrandissent pas.

Pourquoi je veux faire cela ?
C'est dans le but de mettre un fond en PNG avec des ombre.

j'espère avoir été claire et vous remercie d'avance de vos réponses
Modifié par nickleus (27 Nov 2008 - 16:13)

tu as essayé avec un height:100%?

J'ai aussi lu quelque part que le position:relative était à éviter le plus souvent possible, et à accepter dans de rares occasions^^ à titre purement informatif^^

Oui je viens d'essayer height:100% mais ca ne fonctionne pas.

voici le code html

<div id="global">
  <!--Header -->
  <div id="header">
    <div id="haut"></div>
    <div id="milieu"><a href="#"><img src="librairie/img/divers/logo.png" width="180" height="135" alt="RWS" /></a></div>
    <div id="bas"></div>
  </div>
  <!--Fin header -->
  
  <!--Contant -->
  <div id="content">
    <div id="main">
      <p>"main"</p>
      <p>sjdhfshfksd</p>
      <p>jsdhfhsdkfhs</p>
    </div>
    <div id="sidebar_1">"sidebar_1"</div>
    <div id="sidebar_2">"sidebar_2"</div>
  </div>
<!--Fin content -->
</div>

et le css

#content {
	background-color: #FFF;
	position: relative;
	top: -5px;
	z-index: 100;
}
#main {
	position: relative;
	width: 620px;
	z-index: 101;
	background-color: #039;
	float: left;
}
#sidebar_1 {
	position: relative;
	width: 240px;
	z-index: 150;
	background-color: #F00;
	left: -10px;
}
#sidebar_2 {
	position: relative;
	width: 160px;
	z-index: 102;
	background-color: #03C;
	float: right;
}

et ce que cela donne (avec des couleur d'essai).
upload/18610-Sans-titre.jpg[/img

donc la couleur rouge devrait normalement superposer les deux bleu.

Et suivant le contenu de la DIV bleu à gauche s'allonger en conséquences.

avec une idée ?

Commence par remplacer ça:

<p>"main"<br />
sjdhfshfksd<br />
jsdhfhsdkfhs</p>

ça sert à rien de faire 15 blocs :o) des sauts à la ligne suffisent^^

ensuite, pour tes valeurs, fais plus simple pour pas te mélanger^^

main ET #sidebar_2 z-index:101
#sidebar_1 z-index:102


Maintenant, si j'ai bien compris, tu veux que les 3 div soient tous alignés par le haut exactement au même endroit, qu'ils aient tous en permanence la même hauteur, que leur largeur ne change pas, que leur hauteur soit fonction de la longueur du contenu du div 1, main, c'est bien ça?

(si tu as un exemple sur un site de ce que tu voudrais faire exactement avec ton png ça aiderait je pense^^)