Etirer un div en fonction d'un autre

23 janv. 2008, 12:42

Bonjour à tous,

Voila j'ai un <div> qui en contient deux autres positionner cote à cote comme ci dessous. Comment puis je faire pour que le div de droite prenne automatiquement la taille de celui de gauche?

Code : Tout sélectionner

<div id='conteneur'>
<div id='gauche'></div>
<div id='droite'></div>
</div>

d'avance merci

23 janv. 2008, 13:42

Avec deux blocs positionnés côte à côte, difficile de faire autrement que de déclarer une largeur qui ne soit pas automatique.

Si tu es certain que l'un des deux blocs sera toujours plus haut que l'autre, tu peux utiliser le positionnement.

Avec le bloc de gauche plus court que celui de droite :

Code : Tout sélectionner

#conteneur {
  position: relative;
}
#gauche {
  width: 50%;
  position: absolute;
}
#droite {
  margin-left: 50%;
}

Avec le bloc de droite plus court que celui de gauche :

Code : Tout sélectionner

#conteneur {
  position: relative;
}
#gauche {
  margin-right: 50%;
}
#droite {
  width: 50%;
  position: absolute;
  top: 0;
  right: 0;
}

Si tu ignores quel sera le bloc le plus haut, tu peux recourir aux flottants :

Code : Tout sélectionner

#gauche, #droite {
  width: 50%;
  float: left;
}

Autre solution qui peut tenir compte (à vérifier) de ton souhait de largeurs automatiquement ajustées (mais qui ne marchera ni sous IE ni sous Firefox 1 et 2) :

Code : Tout sélectionner

#gauche, #droite {
  /* Aucune largeur définie */
  display: inline-block;
}

23 janv. 2008, 16:03

Désolé je me suis mal expliquer mon soucis n'est pas dans la largeur mais dans la hauteur. J'aimerais que le div de droite prennnent automatiquement la même hauteur que celui de gauche et ceux même si elle venait à être modifier.

D'avance merci

23 janv. 2008, 16:14

Dans ce cas, tu peux t'inspirer de ce tutorial d'Alsacréations.

23 janv. 2008, 19:02

Merci c'est exactement ce qu'il me fallait.

Etirer un div en fonction d'un autre

Qui est en ligne