28173 sujets

CSS et mise en forme, CSS3

Une hauteur de div conteneur qui ne suit pas la hauteur div contenue

Bonjour à tous,
j'ai un problème très basique (je pense) mais vraiment je ne vois pas comment faire, j'ai essayé en jouant avec les propriétés position, height, z-index mais rien n'y fait.

Voici mon code

<head>
<title>Document exemple</title>
<style type="text/css">
<!--
#text_l {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #993300;
	height: auto;
	position: relative;
}
#text_r {
	float: right;
	background-color: #99FF99;
	width: 200px;
	position: relative;
}
-->
</style>
</head>

<body>
<div id="text_l">
  <div id="text_r">
    <p> Un texte plus long et mon fond rouge qui ne suit pas. </p>
  </div>
  <p> Un texte court </p>
  </div>
</body>
</html>


Le but est que mon fond rouge soit au minimum de la hauteur du fond vert.
Bien sûr si je mets beaucoup de texte en fond rouge c'est jolie (enfin chacun ses goûts Smiley rolleyes ), j'ai un cadre vert en haut à droite. Mais dans l'exemple, avec très peu de texte sur fond rouge, je souhaite que le cadre vert ne déborde pas du fond rouge, en gros que la hauteur du fond rouge s'adapte.

J'espère avoir été clair, merci de votre aide,
Bhjp
Modifié par bhjp (19 Dec 2006 - 10:07)
Bonjour,
Je suis moi-même débutant...
Mais je te propose un truc facile, c'est d'indiquer une hauteur identique à tes 2 <div> :
height: 120px;
Ce n'est pas souple si ton texte change de volume, mais c'est efficace.
Pour ton info, j'utilise NVU (logiciel libre) et il y a un module intégré où tu peux agir sur ton style CSS et voir l'effet produit.
Connais-tu les boites? les blocs, les éléments en ligne, les positions fixes, relatives, absolues de ces boites? Ce sont des éléments importants à connaitre pour le positionnement. Ta réponse est là-dedans.
Je te t'indiquerai quelques lectures si ça t'intéresse.
Voilà!
Bonjour,

merci pour la réponse, mais j'ai déjà testé la même hauteur et si le texte sur fond rouge est vraiment long, ca ne va pas du tout.
Je connais à priori les propriétés des div, mais la je bloc Smiley cligne .

Pour le dev, j'utilise UltraEdit, parce que je suis plus developpeur qu'integrateur, et pour l'integration j'utilise le module Web Developper de firefox.

Merci quand même,
Bhjp
Modifié par bhjp (19 Dec 2006 - 14:20)
Bonjour,
Il me semble que ton pb vient du float:right ... vu que cette boite est flottante, elle n'a pas de hauteur "réelle".
Essaie ça pour voir :

<head>
<title>Document exemple</title>
<style type="text/css">
<!--
#text_l {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #993300;
	height: auto;
	position: relative;
}
#text_r {
	float: right;
	background-color: #99FF99;
	width: 200px;
	position: relative;
}
.clr{clear:both}
-->
</style>

</head>
<body>
<div id="text_l">
  <div id="text_r">
    <p> Un texte plus long et mon fond rouge qui ne suit pas. </p>
  </div>
  <p> Un texte court </p>
  <br class='clr' />
  </div>
</body>
</html>
Merci siddhy, sur ton idée, voici ce qui correspond à ce que je veux : 

<head>
<title>Document exemple</title>
<style type="text/css">
<!--
#text_l {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #993300;
	height: auto;
	position: relative;
}
#text_r {
	float: right;
	background-color: #99FF99;
	width: 200px;
	position: relative;
}

.clr {
	clear: both;
	height: 0px;
}
-->
</style>

</head>
<body>
<div id="text_l">
  <div id="text_r">
    <p> Un texte plus long et mon fond rouge qui ne suit pas. Un texte plus long et mon fond rouge qui ne suit pas. Un texte plus long et mon fond rouge qui ne suit pas. </p>
  </div>
  <p> Un texte court </p>
  <div class="clr">&nbsp;</div>
  </div>
</body>
</html>


En effet, dans ton code, si le texte sur fond vert est plus long, le fond rouge ne suit pas.
Avec cette version à peine modifiée c'est bon.

Merci bien,
Bhjp
Sujet clos
Aller à