28172 sujets

CSS et mise en forme, CSS3

Probleme avec la hauteur d'un DIV conteneur

Bonjour,
Je m'arrache les cheveux avec un problème de hauteur d'un DIV parent qui ne veux pas s'ajuster à la hauteur du contenu des DIV enfants.

Voilà à quoi ça ressemble basiquement :
upload/29125-capture.jpg

je souhaiterai que le div parent "blanc" prenne la hauteur du div "vert" qui peut être très variable, mais je n'y arrive pas. Le div blanc ayant une image background qui se répète en y.

Ci-joint le code html :


<body>
<div class="conteneur">
	<?php
	include("menus_gauche.php");
	?>
	<div class="testtest">
		debut
		<br><br><br><br><br><br><br><br><br> 
		fin
	</div>
</div>
</body>


et le CSS:

body{
background-color:red;
text-align:center;
padding:0;
margin:0;
z-index: 0;
}

div.conteneur{
background: url(./images/border-left.png) repeat-y; 
width:1024px;
background-color:white;
text-align:left;
height:auto;
z-index: 1;
}

div.testtest{
position: absolute;
top:50px;
left:500px;
background-color: green;
width:200px;
}


Si je passe le div "testtest" en relative, le div parent s'ajuste, mais du coup, le div "testtest" se positionne en dessous. Smiley decu

A noter qu'il faut que ça fonctionne qu'avec IE8.
Modifié par thorg44 (23 Apr 2010 - 22:42)
Administrateur
Hello,

Il ne s'agit pas d'un problème de flottant (comme le dit Mikachu), mais le principe est le même : tu as choisi un positionnement absolu, donc hors du flux. Il est donc normal que tes éléments hors flux n'aient pas de prise sur leur conteneur.
Il ne s'agit pas d'un bug mais du comportement normal des éléments hors flux.
D'accord, mais comment faire pour que cela fonctionne avec une position relative? (ma boite verte est bien inclue dans le conteneur du coup, mais elle se colle toujours en dessous, et non à-coté)

J'avais bien entendu essayé les méthodes proposées par mickachu avant de poster, mais sans résultats (en plus en définissant float dans le conteneur, ça casse le text-align:center du body sous IE8)

Merci
Modifié par thorg44 (24 Apr 2010 - 03:04)
Administrateur
thorg44 a écrit :
D'accord, mais comment faire pour que cela fonctionne avec une position relative?

Une position relative ne sort pas du flux, contrairement à une position absolute. Donc pas de souci.
Sujet clos
Aller à