Mise en page height auto

Bonjour , je viens chercher de l'aide car j'ai un souci de taille mineur mais c'est assez déplaisant

Donc voilà j'ai une box qui fait height max de toute la page , elle s'agrandi quand je viens poster de article dessus , mais la 'box' article en elle même ben elle se ferme après une div ... enfin je montre le code pour que vous compreniez

<div id="commentaires">
        	<?php
        	$commentaires = $bdd->query('SELECT ID, auteur, DATE_FORMAT(date_comment, \'%d/%m/%Y à %Hh %imin\') AS date_comment_fr, commentaire FROM commentaire ORDER BY ID DESC LIMIT 0, 5');
			while($com = $commentaires->fetch())
			{
			?>
				<strong>Commentaire posté par : </strong>
				
				<div id="auteur-comment"><?php echo '<strong>' .htmlspecialchars($com['auteur']). '</strong>'; ?> </div>
				<div id="date-comment"> <?php echo ' Le ' .htmlspecialchars($com['date_comment_fr']). '.</p>'; ?> </div>
				<div id="commentaire"><?php echo htmlspecialchars($com['commentaire']) ?> </div>
			<?php
			}
			$commentaires->closeCursor();
			?>
        </div>

et voici le css

.content{
  width:90%;
  height:auto !important;
  border:solid black 1px;
  margin:auto;
  margin-top:20px;
  margin-bottom:20px;


}

#titre-content{
	border-bottom:solid 2px #fab300;
	width:100%;
	height:50px;
	background:url('../images/test-content.png') repeat-x;
	text-align:center;
	font-family:"coolvetica";
	color:white;
	font-size:23px;

}

#date-heure{
	width:100%;
	height:35px;
	border-bottom:solid 2px #fab300;
	background-color:#E7E8E8;
	line-height:25px;	
	font-family:"coolvetica";
	text-indent: 10px;
}
#video{
	width:720px;
	height:400px;
	margin:auto;
	margin-top:15px;
	margin-left:auto;
	margin-bottom:15px;
	border:solid 2px #fab300;
}
#contenu-video-title{
	width:100%;
	height:35px;
	margin-top:15px;
	border-top:solid 2px #fab300;
	text-indent:10px;
	font-family:"coolvetica";
}
#contenu-video{
	width:60%;
	height:auto;
	margin:auto;
	border-bottom:solid 2px #fab300;
	font-family:"coolvetica";
}
#commentaires{
	width:100%;
	height:35px;
	margin-top:15px;
	border-top:solid 2px #fab300;
	text-indent:10px;
	float:left;
	
}
#commentaires strong{
	display:block;
	width:17%;
	float:left;
}
#auteur-comment{
	width:20%;
	float:left;
	display:inline-block;
}

#date-comment{
	display: inline-block;
	text-align:right;
	width:60%;
	float:left;
}
#commentaire{
	clear:both;
}

je sais que le code peux être optimisé mais je n'en suis pas la pour le moment , le morceaux de code a partir de id="commentaires , sors de la div général qui est "content" , je ne comprend pas pourquoi elle sors de la alors qu'elle fait partie du meme bloc , voici une petite image pour que vous compreniez

Bonsoir,
Surement à cause des valeurs height que tu as fixé.
En règle général, il faut éviter d'utiliser cette propriété qui ne permet pas au contenu de s'adapter à la boite.
Si tu as besoin d'une hauteur minimum utilise min-height.

en fait j'aimerais surtout que la hauteur s'allonge en meme temps que le contenu , étant donné qu'il y a un système de commentaires il faut d'office que la boite s'allonge seul tu vois ? mais je n'y arrive pas , pourtant avec une height auto ça devrais passer niquel ?

La valeur par défaut de height est auto. Tu peux donc enlever toutes tes propriétés height de ta feuille de style.

evengyl a écrit :
pourtant avec une height auto ça devrais passer niquel ?

Oui, cela ne fonctionne toujours pas ?

non ça ne marche pas , j'ai retirer tout ce qui était height auto et j'ai laisser ceux pour lesquelles j'avais besoin d'une taille fixe , mais tout passe en dessous quand meme

Encore une fois je ne suis pas sur que dans ton cas tu est besoin de la propriété height.
D'ailleurs je ne comprends pas pourquoi tu mets à ta div #commentaires une hauteur de 35px ?
35px c'est vraiment petit pour l'ensemble de tes commentaires !

De plus, il faut que que tu remplaces tes id auteur-comment, date-comment et commentaire par des class. Un id doit être unique dans ta page.

sans vraiment le savoir tu viens de me donner la réponse avec le 35 px ... quelle boulet je fait , oui je sais je sais , c'est une page de test pour le moment on peux dire que c'est la version beta 1.0 merci bcp pour ton aide précieuse !

Bon la solution n'a pas marché .. je suis toujours bloqué ... une autre idée ?

Edite le code sur cette page pour montrer ton problème : http://jsfiddle.net/cPWZY/
Ta capture d'écran ne me permet pas de voir ton problème.

Si c'est pas un problème de hauteur c'est surement un problème de flottant.

benj a écrit :
Si c'est pas un problème de hauteur c'est surement un problème de flottant.

Je pense également qu'il pourrait s'agir d'un problème de dépassement de flottants.(même si cette hauteur fixe pour les commentaires est pour le moins surprenante comme le mentionne benj...)
Même remarque pour l'utilisation des id.

Sans page en ligne (même minimaliste), aucune certitude, ni aucune envie de partir dans de longues tirades, hypothèses, ou supputations en tout genre.
Merci donc de fournir une url de test afin de nous permettre de tenter de vous venir en aide