Hauteur div flottant idem div parent

Je cherche une astuce pour donner à un div enfant flottant la même taille en hauteur que son div parent.

#bloc_contenu est le parent
#bloc_gauche est l'enfant

#bloc_contenu { 
width : 978px; 
height : 100%; 
min-height : 100%;  
margin-left : 10px; 
margin-top : 30px; 
background-color : red; 
} 
#bloc_gauche { 
width : 190px; 
height : 100%; 
min-height : 100%; 
float : left; 
border : 1px solid #444444; 
background : url(images/fonddroite2.jpg); 
background-repeat : no-repeat;

je sèche grave depuis un bon moment...merci pour votre aide

Et quel est le problème ?

A savoir, que si tu donnes une hauteur en pourcentage à un élément, pour que ça fonctionne correctement avec un DOCTYPE complet et valide il faut que son élément parent ait une hauteur définie, que ce soit en pourcentage, pixel, em, ou autres, et ce jusqu'à l'élément html si tu n'utilises que des pourcentages.

Tout comme Agylus a dit. Je rajoute juste que si le parent tire sa hauteur d'un min-height et pas d'un height, ça ne marche pas.
Ici il est probable que ton height: 100% pour le parent ne soit pas pris en compte. S'il était pris en compte, alors celui du bloc enfant serait pris en compte aussi.

Quoi qu'il en soit, les mises en page où on a besoin de figer la hauteur des principaux conteneurs à 100% de la hauteur du viewport sont très rares. Je ne connais pas le design que tu cherches à intégrer, mais il me semble probable que tu t'y prennes de la mauvaise manière.

J'ai bien compris vos explications et cela fonctionne avec un height fixé sur le parent.

#bloc_contenu { 
width : 978px; 
height : 900px; 
margin-left : 10px; 
margin-top : 30px; 
background-color : black; 
} 
#bloc_gauche { 
width : 190px; 
height: 100%;
float : left; 
border : 1px solid #444444; 
background : url(images/fonddroite2.jpg); 
background-repeat : no-repeat;
} 
#bloc_centre { 
font : 14px Verdana, Helvetica, Arial; 
width : 552px; 
height : 97.8%;
float : left; 
background-color : #ededed;
background : url(images/fondbloccentre.jpg); 
background-repeat : repeat-x; 
border : 1px solid #444444; 
margin-left : 10px; 
padding : 10px;
} 
#bloc_droite { 
width : 190px; 
height : 100%;
float : left;
margin-left : 10px; 
border : 1px solid #444444; 
background : url(images/fonddroite.jpg); 
background-repeat : no-repeat; 
} 
.separation { 
clear : both; 
visibility : hidden; 
}

la dernière classe pour que le div parent s'allonge à cause des flottants.

Mais je n'ai pas atteind le résultat voulu. Je repose ma problématique.

Un bloc div contient trois div enfant en flottants, celui du milieu contient le contenu du site et doit définir la hauteur totale du div parent et des 2 autres div à gauche et droite.

Bon alors pour aller au plus court: avoir des DIV adjacentes de même hauteur sans figer la hauteur de ces DIV ou de leur parent, c'est pas possible. Enfin si, c'est possible (display: table-cell), mais pas compatible IE6-7.

Donc, pour avoir des colonnes visuellement de même hauteur (car c'est le but recherché, si je ne m'abuse?), il y a deux possibilités:
1. Utiliser la technique des colonnes factices (Google).
2. Utiliser un tableau de mise en page.

idinfo68 a écrit :
Je repose ma problématique.

À vrai dire non, tu la poses pour la première fois, vu que ce n'était pas l'objet de ton premier message.
C'est un écueil classique quand on s'attaque à un problème que l'on ne maitrise pas (sinon on n'aurait pas de problème ): on a tendance à demander «comment faire pour que cette solution marche?» plutôt que de demander «je veux obtenir tel résultat, quelle solution serait adaptée?».

Florent V. a écrit :
Bon alors pour aller au plus court: avoir des DIV adjacentes de même hauteur sans figer la hauteur de ces DIV ou de leur parent, c'est pas possible. Enfin si, c'est possible (display: table-cell), mais pas compatible IE6-7.

Donc, pour avoir des colonnes visuellement de même hauteur (car c'est le but recherché, si je ne m'abuse?), il y a deux possibilités:
1. Utiliser la technique des colonnes factices (Google).
2. Utiliser un tableau de mise en page.

Ok, j'ai donc opté pour un tableau juste pour la partie centrale du contenu dans un div.

A l'heure du full div pour la mise en page, on se rend compte que tout n'est pas encore possible pour certains cas précis comme l'était les tableaux.

Merci pour toutes vos réponses...

idinfo68 a écrit :
A l'heure du full div

Faut vraiment mal connaitre HTML pour faire du full DIV. Il y a plus de 80 éléments en HTML 4, il faut utiliser les bons éléments pour chaque type de contenu...

idinfo68 a écrit :
on se rend compte que tout n'est pas encore possible pour certains cas précis

En fait c'est possible et largement plus polyvalent que ce qu'on peut faire avec des tableaux. Par contre tout n'est pas implémenté dans les vieux navigateurs (Papy IE6, le déjà vieux IE7...).

t'as trouvé la solution??
Modifié par naw42 (04 Apr 2009 - 13:24)