Bonjour, j'ai un soucis je pense dû à mes float left, j'aimerais que ma div prennent la hauteur de mon parent si celui-ci change de taille..

pour le moment voici mon code :

<div id="container">
   <div id="haut">
	<div id="m_hg">
		<p>BLABLA</p>
	</div>
	<div id="m_hd">BLA BLA</div>
   </div>
	<div id="m_g">
		<img src=""  alt ="img" />
	</div>
	<div id="m_m">
<p>blablabla</p>
	</div>
	<div id="m_d"><p>blabla</br>bbla</p>
      </div>
    </div>

code css :

#bandeau
{
	margin : auto ;
	width: 1000px;
	background-color: #D6D6D6;
	overflow : auto ;
	font-family : "Trebuchet MS";
	font-weight : bold ;
	border : 1px solid #535353 ;

}

#haut {
width : 100% ;
float : left ;
background-color : #535353 ;
color : white ;
}
#haut p {
padding : 3px 5px;
margin : 0px ;
}

#m_hg {
	float : left ;
	width : 600px ;
}
#m_hd {
	width : 370px ;
	float : left ;
	background-color : #535353 ;
	text-align : right ;
}

#m_g {
width : 200px ;
float : left ;
background-color : #f5ecdd ;
border : 1px solid #535353 ;
margin : 5px ;
}

#m_m
{
	padding : 5px 0;
	width: 245px;
	float: left;
}

#m_m p {
color : #545454 ;
margin : 3px 0 ;
font-size : 13px ;
}

#m_d {
	float : left ;
	width : 523px ;
	background-color : #2D2D2D ;
	margin : 5px;
	padding : 5px ;
}
#m_d p {
	font-weight : normal ;
	margin : 0 ;
	font-size : 13px ;
	color : #FFF ;
}

je souhaiterais que ma div #m_g prenne la hauteur du parent, est-ce réalisable selon vous ?

merci par avance

A.

-
Edité par DwizN 18 juillet 2018 à 21:04:12

Hello,

Ton code n'est pas très bien indenté donc difficile à lire mais pour qu'une div enfant prenne la taille du parent il faut simplement jouer avec les pourcentage et dans ton cas tu veux que l'enfant soit de même taille que le parent donc tu applique à l'enfant un width et un height de 100%;

Pickles a écrit:

Hello,

Ton code n'est pas très bien indenté donc difficile à lire mais pour qu'une div enfant prenne la taille du parent il faut simplement jouer avec les pourcentage et dans ton cas tu veux que l'enfant soit de même taille que le parent donc tu applique à l'enfant un width et un height de 100%;

Non, pas de width:100%. De rares cas nécessitent un width:100%, une image, une table un display:table par exemple.
Dans les autres cas il est inutile et parfois problématique.

width:100% tu es le mal !

https://blog.goetter.fr/2011/11/30/width-100-tu-es-le-mal/

Bonjour,

Perso je l'ai vu hiere le code et il m'a aussi fait mal aux yeux, puis j'en suis encore a me demander ce que font des <br> dans le css.

Bref ceci étant dit, je pense en plus que c'est mal expliqué ton truc, tu veut que ton m_g (l'image) ai la même taille  ... ou partage le même espace ?

Si c'est cette dernière solution, tu va créer un conteneur placer tes deux objet dedans et leurs allouer 49% du height à chacun dans le conteneur.

Ca c'est la théorie, mais vu que tu semble vouloir jouer sur une image ca va te demander quelque ajustements, à ta place je me contenterais de déjà travailler juste sur cet ensemble dans un 1er temps sans aucun autres objets autour, il se peut que tu doivent créer aussi deux sous objets pour obtenir le comportement désiré.

C'est juste une piste ne sachant pas ce que tu désir faire réellement.

Puis j'suis en vacances moins j'en fait... moins j'en fait .... : D

-
Edité par exen 19 juillet 2018 à 13:14:28

Les <br> c'est l'éditeur du site, ça arrive quand on copie/colle pas bien.

Par contre dans le code html il y a </br>. C'est non, c'est soit <br /> <br> ou encore <br/>.

Et il y a une curiosité dans la CSS :

#haut est en float:left, ce qui implique que l'on souhaite mettre quelque chose à côté.
Alors pourquoi lui appliquer également un width:100% ?

Bonjour DwizN,

Une proposition , passer la souris sur la 2eme et 3eme colonne

c'est ce que tu veux? :

https://codepen.io/Zonecss/pen/yqVJKj