[SOLUCIONADO] cargar divs dinamicos uno debajo del otro, sin que se muevan?

[kukiko11]

necesito cargar divs dinamicos uno debajo del otro, el problema esta en que cada vez que agrego uno nuevo los anteriores se corren unos 30px a la derecha, que posiciones deberia manejar en el css? o que podria estar haciendo mal?? dejo el codigo por si acaso

divs:

Código HTML:

<div class="comentarios-contenido">
 
<?php require('support/comments.php');?>
 
<div id="comentario"></div>
 
</div>
 

css:

Código CSS:

.comment{
  
  /* Syling the comments and the comment form container */
  
  padding:12px;
  width: 40rem;
  position: relative;
  background-color:#fcfcfc;
  border:1px solid white;
  color:#888;
  margin-bottom:2rem;
  text-align: justify;
  
  /* CSS3 rounded corners and drop shadows */
  
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;
 
  -moz-box-shadow:2px 2px 0 #c2c2c2;
  -webkit-box-shadow:2px 2px 0 #c2c2c2;
  box-shadow:2px 2px 0 #c2c2c2;
}
 
.avatar{
top: -10rem;
}
.comment .avatar{
 
  /*
  / The avatar is positioned absolutely, 
  / and offset outside the comment div
  /*/
  height:4rem;
  left:-70px;
  position:absolute;
  width:3.5rem;
  background:url('../imagenes/usuarios/avatar.gif') no-repeat #fcfcfc;
  
  /* Centering it vertically: */
  
  margin-top:-25px;
  top:50%;
 
  -moz-box-shadow:1px 1px 0 #c2c2c2;
  -webkit-box-shadow:1px 1px 0 #c2c2c2;
  box-shadow:1px 1px 0 #c2c2c2;
}
 
.comment .avatar img{
  display:block;
}
 
.comment .name{
  font-size:20px;
  padding-bottom:10px;
  color:#ccc;
}
 
.comment .date{
  font-size:10px;
  padding:6px 0;
  position:absolute;
  right:15px;
  top:10px;
  color:#bbb;
}
 
.comment p{
  font-size:18px;
  line-height:1.5;
  overflow-x:hidden;
}