Tema: cargar divs dinamicos uno debajo del otro, sin que se muevan?
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 09/04/2016, 23:37
kukiko11
 
Fecha de Ingreso: diciembre-2015
Mensajes: 115
Antigüedad: 8 años, 4 meses
Puntos: 2
cargar divs dinamicos uno debajo del otro, sin que se muevan?
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: 
Ver original
  1. <div class="comentarios-contenido">
  2.  
  3. <?php require('support/comments.php');?>
  4.  
  5. <div id="comentario"></div>
  6.  
  7. </div>

css:

Código CSS: 
Ver original
  1. .comment{
  2.   
  3.   /* Syling the comments and the comment form container */
  4.   
  5.   padding:12px;
  6.   width: 40rem;
  7.   position: relative;
  8.   background-color:#fcfcfc;
  9.   border:1px solid white;
  10.   color:#888;
  11.   margin-bottom:2rem;
  12.   text-align: justify;
  13.   
  14.   /* CSS3 rounded corners and drop shadows */
  15.   
  16.   -moz-border-radius:10px;
  17.   -webkit-border-radius:10px;
  18.   border-radius:10px;
  19.  
  20.   -moz-box-shadow:2px 2px 0 #c2c2c2;
  21.   -webkit-box-shadow:2px 2px 0 #c2c2c2;
  22.   box-shadow:2px 2px 0 #c2c2c2;
  23. }
  24.  
  25. .avatar{
  26. top: -10rem;
  27. }
  28. .comment .avatar{
  29.  
  30.   /*
  31.   / The avatar is positioned absolutely, 
  32.   / and offset outside the comment div
  33.   /*/
  34.   height:4rem;
  35.   left:-70px;
  36.   position:absolute;
  37.   width:3.5rem;
  38.   background:url('../imagenes/usuarios/avatar.gif') no-repeat #fcfcfc;
  39.   
  40.   /* Centering it vertically: */
  41.   
  42.   margin-top:-25px;
  43.   top:50%;
  44.  
  45.   -moz-box-shadow:1px 1px 0 #c2c2c2;
  46.   -webkit-box-shadow:1px 1px 0 #c2c2c2;
  47.   box-shadow:1px 1px 0 #c2c2c2;
  48. }
  49.  
  50. .comment .avatar img{
  51.   display:block;
  52. }
  53.  
  54. .comment .name{
  55.   font-size:20px;
  56.   padding-bottom:10px;
  57.   color:#ccc;
  58. }
  59.  
  60. .comment .date{
  61.   font-size:10px;
  62.   padding:6px 0;
  63.   position:absolute;
  64.   right:15px;
  65.   top:10px;
  66.   color:#bbb;
  67. }
  68.  
  69. .comment p{
  70.   font-size:18px;
  71.   line-height:1.5;
  72.   overflow-x:hidden;
  73. }