28173 sujets

CSS et mise en forme, CSS3

Hauteur DIV adaptable

Bonjour à tous,

j'ai un problème avec la mise en page de mon site en CSS. Il y a une DIV 'main' contenant une DIV gauche et une DIV droite, lesquelles flottent respectivement à gauche et à droite et j'aimerais que la taille de ces 2 DIV d'adaptent en hauteur en fonction de la DIV 'main'.

upload/14986-Sanstitre.jpg

Je vous fournis une image pour plus de clarté. Par exemple sur l'image, je veux que la DIV droite s'adapte et prenne la même hauteur que la DIV 'main'. La DIV gauche contient plus de texte que la DIV droite donc elle est plus grande en hauteur et j'aimerais que la droite suive.

Le code HTML :

<div id="main">
	<div id="gauche"><p>blablabla</p></div>
	<div id="droite"><p>Menu</p></div>
	<div class="clearer"></div>
</div>


Le code CSS :

div#main {
	width: 761px;
}

div#gauche {
	background-image: url(../images/nav_04.gif);
	float: left;
	width: 599px;
}

div#droite {
	background-image: url(../images/nav_05.gif);
	float: right;
	width: 162px;
}


Merci Smiley cligne
Modifié par GamerP7 (03 Dec 2007 - 15:42)
Juste comme ça, au passage: évite d'attribuer des noms qui portent sur un rend visuel, il faut toujours garder en tête qu'HTML structure/décrit l'information, CSS la met en forme. Autrement dit, ton div "gauche" pourrait très bien être placé à droite sans toucher au code HTML, ce qui n'aurait plus beaucoup de sens…
Modifié par Benjamin D.C. (03 Dec 2007 - 15:44)
Benjamin D.C. a écrit :
Petites précisions:
• c'est ton div gauche qui dicte la hauteur de main?
• les largeurs sont-elles fluides?

Au passage, évite d'attribuer des noms qui portent sur un rend visuel, il faut toujours garder en tête qu'HTML structure/décrit l'information, CSS la met en forme. Autrement dit, ton div "gauche" pourrait très bien être placé à droite sans toucher au code HTML, ce qui n'aurait plus beaucoup de sens…


edit: oui bon si tu édites après mon post évidemment… Smiley biggol


Désolé, j'étais en train de fournir des infos supplémentaires Smiley langue

Sinon pour les noms, j'en ai mis des différents dans mon code mais c'est pour mieux faire comprendre mon problème sur le forum Smiley smile

Ma DIV gauche contient plus de contenu donc elle est plus grande que la DIV droite et je voudrais qu'elle suive.
Bon…en attendant l'éventuelle publication prochaine ici-même d'un article traitant justement de ce genre de questions, et sans vouloir tout chambouler dans ce que tu as fait, tu pourras simplement:
• créer un contexte de formatage sur ton conteneur (overflow:auto fait ça bien)
• adopter la méthode des colonnes factices
Benjamin D.C. a écrit :
Bon…en attendant l'éventuelle publication prochaine ici-même d'un article traitant justement de ce genre de questions, et sans vouloir tout chambouler dans ce que tu as fait, tu pourras simplement:
• créer un contexte de formatage sur ton conteneur (overflow:auto fait ça bien)
• adopter la méthode des colonnes factices


Je ne comprends pas ce que tu veux dire par "créer un contexte de formatage sur ton conteneur (overflow:auto fait ça bien)".
Modifié par GamerP7 (03 Dec 2007 - 16:15)
Le problème qui se pose est que si ma DIV gauche a plus de contenu que celle le droite, la méthode ne marche pas avec les colonnes factices :'( Car il n'y aura que la background-image de la colonne de GAUCHE au lieu de la DROITE. Une idée?
Modifié par GamerP7 (03 Dec 2007 - 16:16)
GamerP7 a écrit :
Le problème qui se pose est que si ma DIV gauche a plus de contenu que celle le droite, la méthode ne marche pas avec les colonnes factices :'(

Je ne vois pas trop pourquoi ça empêcherait d'utiliser la méthode des colonnes factices. (Je n'ai pas compris la phrase d'explication que tu donnais suite à ça...) Smiley confus

GamerP7 a écrit :
Je ne comprends pas ce que tu veux dire par "créer un contexte de formatage sur ton conteneur (overflow:auto fait ça bien)".

Il s'agit d'éviter un problème de dépassement des éléments flottants.
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html

Une recherche sur «contexte de formatage» donne également un certain nombre de réponses pertinentes. Smiley cligne
Modifié par Florent V. (03 Dec 2007 - 17:00)
Sujet clos
Aller à