Div etiqueta no contiene contenido

Question

He creado un formulario que entra en los comentarios en mi blog, pero cuando los comentarios se muestran en la página web el color de fondo que he añadido a la div es ya sea para grandes o pequeños a. He proporcionado el código de abajo. Cualquier ayuda se agradece!

    <h2 id="comments-title">Comments</h2>
 <div id="comment-list">
    <?php

}
$commenttimestamp = strtotime("now");

$sql = "SELECT * FROM php_blog_comments WHERE entry='$id' ORDER BY timestamp";
$result = mysql_query ($sql) or print ("Can't select comments from table php_blog_comments.<br />" . $sql . "<br />" . mysql_error());
while($row = mysql_fetch_array($result)) {
    $timestamp = date("l F d Y", $row['timestamp']);
      printf("<div class='comment-ind'><p id='comments'><a id='username' href=\"%s\">%s</a> %s</p>", stripslashes($row['url']), stripslashes($row['name']), $timestamp);
    print("<p class='comments'>" . stripslashes($row['comment']) . "</p><div class='clr'><br></div></div>");

  }
?>

<form id="commentform" method="post" action="process.php">

<p><input type="hidden" name="entry" id="entry" value="<?php echo $id; ?>" />

<input type="hidden" name="timestamp" id="timestamp" value="<?php echo $commenttimestamp; ?>">

<input type="text" name="name" id="name" title="Name (required)" /><br />

<input type="text" name="email" id="email" title="Mail (will not be published) (required)" /><br />

<input type="text" name="url" id="url" title="Website" value="http://" /><br />

<br />
<textarea  title="Your Comment Goes Here" name="comment" id="comment"></textarea></p>

<p><input type="submit" name="submit_comment" id="submit_comment" value="Add Comment" /></p>

</form>
</div>

CSS:

    #comments-title {
    background-color: #282828;
    width: 567px;
    height: 30px;
    font-size: 25px;
    font-family: arial;
    color: #ffffff;
    padding: 5px;
    padding-top: 6px;
    padding-bottom: 4px;
}


#comment-list{
    border:1px solid #dadada;
    width: 565px;
    padding: 5px;
    font-family: Helvetica;
    font-size: 18px;
}

#comments {
    width: 480px;
    font-size: 12px;
    color: #444444;
}

.comments {
    width: 480px;
    height: 20px;
}
.comment-ind {
    background-color: #eeeeee;
    width: 548px;
    position: relative;
    min-height: 10px;
    margin: 5px;
    padding: 8px;
}

Imagen: ??

Answer 1

¿Estamos viendo todo el CSS que se aplica a este div. En cuanto a la captura de pantalla yo supongo que el párrafo de texto se hace flotar a la izquierda y el div que contiene no es envolver. Intente quitar la altura y la adición a la overflow:hidden .comments div que contiene. De esta manera la altura se ajustará con el tamaño de la contienen.

Answer 2

Su problema es con height: 20px;. Se puede cambiar a min-height: 20px; y entonces será al menos esa altura, pero la forma en que lo tienes, siempre será de 20 píxeles de altura independientemente del contenido.