Foros del Web » Creando para Internet » CSS »

El DIVs aumenta su tamano cuando aumenta el volumen de informacion

 Estas en el tema de El DIVs aumenta su tamano cuando aumenta el volumen de informacion en el foro de CSS en Foros del Web. Amigos, Llevo dias tratando de resolver esto y nada, tengo un DIV contenedor (central) con varios DIV (contenido_centro) en los cuales se almacena bastante informacion, ...
  #1 (permalink)  
Antiguo 04/09/2012, 06:47
 
Fecha de Ingreso: septiembre-2012
Ubicación: La Habana
Mensajes: 32
Antigüedad: 12 años, 1 mes
Puntos: 1
Pregunta El DIVs aumenta su tamano cuando aumenta el volumen de informacion
Amigos,
Llevo dias tratando de resolver esto y nada, tengo un DIV contenedor (central) con varios DIV (contenido_centro) en los cuales se almacena bastante informacion, el contenedor tiene 780 px de ancho, pero cuando los contenidos del centro aumentan en volumen el div contenedor (central) se me ancha como dos o tres pixeles. Como resuelvo esto?

Gracias de antemano a todos...



Código HTML: 
Ver original
  1. <div  id="central">
  2.     <div  id="contenido_centro">
  3.     aqui va el contenido del centro de la pagina...
  4.     aqui va el contenido del centro de la pagina...
  5.     aqui va el contenido del centro de la pagina...
  6.     </div>
  7.     <div  id="contenido_centro">
  8.     aqui va el contenido del centro de la pagina...
  9.     aqui va el contenido del centro de la pagina...
  10.     aqui va el contenido del centro de la pagina...
  11.     </div>
  12. </div>


Código CSS: 
Ver original
  1. #central {
  2. border-left: 1px solid #000;
  3. border-right: 1px solid #000;
  4. border-top: 1px solid #000;
  5. border-bottom: 1px solid #000;
  6. width:780px;
  7. margin:auto;
  8. }
  9.  
  10. #contenido_centro {
  11. border-left: 1px solid #000;
  12. border-right: 1px solid #000;
  13. border-top: 1px solid #000;
  14. border-bottom: 1px solid #000;
  15. width:500px;
  16. margin:0 auto;
  17. margin-top: 5px;
  18. margin-bottom: 5px;
  19. }
  #2 (permalink)  
Antiguo 04/09/2012, 06:57
Avatar de cristian_cena
Colaborador
  
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 15 años, 4 meses
Puntos: 269
Respuesta: El DIVs aumenta su tamano cuando aumenta el volumen de informacion
Algunas posibilidades:
- El ancho total de una caja es la suma de width + border + margin + padding.
- No olvides incluir el doctype a tu documento html
- Resetea los estilos (reset css)

Saludos.
  #3 (permalink)  
Antiguo 04/09/2012, 08:00
 
Fecha de Ingreso: septiembre-2012
Ubicación: La Habana
Mensajes: 32
Antigüedad: 12 años, 1 mes
Puntos: 1
Respuesta: El DIVs aumenta su tamano cuando aumenta el volumen de informacion
Gracias cristian_cena:

Referente al "doctype", claro que esta, solo que decidi poner el codigo HTML y si es cierto "el ancho total de una caja es la suma de width + border + margin + padding".

El problema esta en que en los div "contenido_centro" va informacion resultante de una base de datos y cuando la informacion es pequeña el div mantiene su tamaño, pero cuendo el volumen es extenso tiende a aumentar 2 o 3 px, y esto me rompe con todo el esquema de diseño de la web.

Gracias nuevamente...
  #4 (permalink)  
Antiguo 04/09/2012, 08:17
Avatar de cristian_cena
Colaborador
  
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 15 años, 4 meses
Puntos: 269
Respuesta: El DIVs aumenta su tamano cuando aumenta el volumen de informacion
Cita:
Iniciado por emilkavg Ver Mensaje
pero cuendo el volumen es extenso tiende a aumentar 2 o 3 px,
El contenido (sea estático o dinámico) no puede modificar el width de una caja cuyo valor esté expresado en px.
Otra posibilidad es que #contenido_centro esté heredando algún estilo (ej: div{})
tenes un link a tu proyecto? queres haces un fiddle así lo vemos mejor?
Saludos.
  #5 (permalink)  
Antiguo 05/09/2012, 07:30
 
Fecha de Ingreso: septiembre-2012
Ubicación: La Habana
Mensajes: 32
Antigüedad: 12 años, 1 mes
Puntos: 1
Pregunta Respuesta: El DIVs aumenta su tamano cuando aumenta el volumen de informacion
Aqui dejo todos los detalles para quevean cual es mi problema.


Código CSS: 
Ver original
  1. body {
  2.     background-color:#eee; 
  3.     font-family:Verdana, Arial, Helvetica, sans-serif;
  4.     font-size:11px;
  5.     color: #000;
  6. }
  7.  
  8. #central {
  9. border: 1px solid #000;
  10. overflow:hidden;
  11. width:780px;
  12. margin:auto;
  13. }
  14.  
  15. #contenido_centro {
  16. border: 1px solid #FF0000;
  17. width:500px;
  18. margin:auto;
  19. margin-top:3px;
  20. margin-bottom:3px;
  21.  
  22. }



DE ESTA FORMA EL DIV ES NORMAL:


Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
  5. <title>Registro</title>
  6. <link href="estilo.css" rel="stylesheet" type="text/css" />
  7. </head>
  8. <div  id="central">
  9.     <div  id="contenido_centro">
  10.     aqui va el contenido del centro de la pagina...
  11.     aqui va el contenido del centro de la pagina...
  12.     aqui va el contenido del centro de la pagina...
  13.     </div>
  14.     <div  id="contenido_centro">
  15.     aqui va el contenido del centro de la pagina...
  16.     aqui va el contenido del centro de la pagina...
  17.     aqui va el contenido del centro de la pagina...
  18.     aqui va el contenido del centro de la pagina...
  19.     aqui va el contenido del centro de la pagina...
  20.     aqui va el contenido del centro de la pagina...
  21.     aqui va el contenido del centro de la pagina...
  22.     aqui va el contenido del centro de la pagina...
  23.     </div>
  24. </div>
  25. <body>
  26. </body>
  27. </html>



DE ESTA FORMA EL DIV AUMENTA SU ANCHO:


Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
  5. <title>Registro</title>
  6. <link href="estilo.css" rel="stylesheet" type="text/css" />
  7. </head>
  8. <div  id="central">
  9.     <div  id="contenido_centro">
  10.     aqui va el contenido del centro de la pagina...
  11.     aqui va el contenido del centro de la pagina...
  12.     aqui va el contenido del centro de la pagina...
  13.     </div>
  14.     <div  id="contenido_centro">
  15.     aqui va el contenido del centro de la pagina...
  16.     aqui va el contenido del centro de la pagina...
  17.     aqui va el contenido del centro de la pagina...
  18.     aqui va el contenido del centro de la pagina...
  19.     aqui va el contenido del centro de la pagina...
  20.     aqui va el contenido del centro de la pagina...
  21.     aqui va el contenido del centro de la pagina...
  22.     aqui va el contenido del centro de la pagina...
  23.     aqui va el contenido del centro de la pagina...
  24.     aqui va el contenido del centro de la pagina...
  25.     aqui va el contenido del centro de la pagina...
  26.     aqui va el contenido del centro de la pagina...
  27.     aqui va el contenido del centro de la pagina...
  28.     aqui va el contenido del centro de la pagina...
  29.     aqui va el contenido del centro de la pagina...
  30.     aqui va el contenido del centro de la pagina...
  31.     aqui va el contenido del centro de la pagina...
  32.     aqui va el contenido del centro de la pagina...
  33.     aqui va el contenido del centro de la pagina...
  34.     aqui va el contenido del centro de la pagina...
  35.     aqui va el contenido del centro de la pagina...
  36.     aqui va el contenido del centro de la pagina...
  37.     aqui va el contenido del centro de la pagina...
  38.     aqui va el contenido del centro de la pagina...
  39.     aqui va el contenido del centro de la pagina...
  40.     aqui va el contenido del centro de la pagina...
  41.     aqui va el contenido del centro de la pagina...
  42.     aqui va el contenido del centro de la pagina...
  43.     aqui va el contenido del centro de la pagina...
  44.     aqui va el contenido del centro de la pagina...
  45.     aqui va el contenido del centro de la pagina...
  46.     aqui va el contenido del centro de la pagina...
  47.     aqui va el contenido del centro de la pagina...
  48.     aqui va el contenido del centro de la pagina...
  49.     aqui va el contenido del centro de la pagina...
  50.     aqui va el contenido del centro de la pagina...
  51.     aqui va el contenido del centro de la pagina...
  52.     aqui va el contenido del centro de la pagina...
  53.     aqui va el contenido del centro de la pagina...
  54.     aqui va el contenido del centro de la pagina...
  55.     aqui va el contenido del centro de la pagina...
  56.     aqui va el contenido del centro de la pagina...
  57.     aqui va el contenido del centro de la pagina...
  58.     aqui va el contenido del centro de la pagina...
  59.     aqui va el contenido del centro de la pagina...
  60.     aqui va el contenido del centro de la pagina...
  61.     aqui va el contenido del centro de la pagina...
  62.     aqui va el contenido del centro de la pagina...
  63.     aqui va el contenido del centro de la pagina...
  64.     aqui va el contenido del centro de la pagina...
  65.     aqui va el contenido del centro de la pagina...
  66.     aqui va el contenido del centro de la pagina...
  67.     aqui va el contenido del centro de la pagina...
  68.     aqui va el contenido del centro de la pagina...
  69.     aqui va el contenido del centro de la pagina...
  70.     aqui va el contenido del centro de la pagina...
  71.     aqui va el contenido del centro de la pagina...
  72.     aqui va el contenido del centro de la pagina...
  73.     aqui va el contenido del centro de la pagina...
  74.     aqui va el contenido del centro de la pagina...
  75.     aqui va el contenido del centro de la pagina...
  76.     aqui va el contenido del centro de la pagina...
  77.     aqui va el contenido del centro de la pagina...
  78.     aqui va el contenido del centro de la pagina...
  79.     aqui va el contenido del centro de la pagina...
  80.     aqui va el contenido del centro de la pagina...
  81.     aqui va el contenido del centro de la pagina...
  82.     aqui va el contenido del centro de la pagina...
  83.     aqui va el contenido del centro de la pagina...
  84.     aqui va el contenido del centro de la pagina...
  85.     aqui va el contenido del centro de la pagina...
  86.     aqui va el contenido del centro de la pagina...
  87.     aqui va el contenido del centro de la pagina...
  88.     aqui va el contenido del centro de la pagina...
  89.     aqui va el contenido del centro de la pagina...
  90.     aqui va el contenido del centro de la pagina...
  91.     aqui va el contenido del centro de la pagina...
  92.     aqui va el contenido del centro de la pagina...
  93.     aqui va el contenido del centro de la pagina...
  94.     aqui va el contenido del centro de la pagina...
  95.     aqui va el contenido del centro de la pagina...
  96.     aqui va el contenido del centro de la pagina...
  97.     aqui va el contenido del centro de la pagina...
  98.     aqui va el contenido del centro de la pagina...
  99.     aqui va el contenido del centro de la pagina...
  100.     aqui va el contenido del centro de la pagina...
  101.     aqui va el contenido del centro de la pagina...
  102.     aqui va el contenido del centro de la pagina...
  103.     aqui va el contenido del centro de la pagina...
  104.     aqui va el contenido del centro de la pagina...
  105.     aqui va el contenido del centro de la pagina...
  106.     aqui va el contenido del centro de la pagina...
  107.     aqui va el contenido del centro de la pagina...
  108.     aqui va el contenido del centro de la pagina...
  109.     aqui va el contenido del centro de la pagina...
  110.     aqui va el contenido del centro de la pagina...
  111.     aqui va el contenido del centro de la pagina...
  112.     aqui va el contenido del centro de la pagina...
  113.     aqui va el contenido del centro de la pagina...
  114.     aqui va el contenido del centro de la pagina...
  115.     aqui va el contenido del centro de la pagina...
  116.     aqui va el contenido del centro de la pagina...
  117.     aqui va el contenido del centro de la pagina...
  118.     aqui va el contenido del centro de la pagina...
  119.     aqui va el contenido del centro de la pagina...
  120.     aqui va el contenido del centro de la pagina...
  121.     aqui va el contenido del centro de la pagina...
  122.     aqui va el contenido del centro de la pagina...
  123.     aqui va el contenido del centro de la pagina...
  124.     aqui va el contenido del centro de la pagina...
  125.     aqui va el contenido del centro de la pagina...
  126.     aqui va el contenido del centro de la pagina...
  127.     aqui va el contenido del centro de la pagina...
  128.     aqui va el contenido del centro de la pagina...
  129.     aqui va el contenido del centro de la pagina...
  130.     aqui va el contenido del centro de la pagina...
  131.     aqui va el contenido del centro de la pagina...
  132.     aqui va el contenido del centro de la pagina...
  133.     aqui va el contenido del centro de la pagina...
  134.     aqui va el contenido del centro de la pagina...
  135.     aqui va el contenido del centro de la pagina...
  136.     aqui va el contenido del centro de la pagina...
  137.     aqui va el contenido del centro de la pagina...
  138.     aqui va el contenido del centro de la pagina...
  139.     aqui va el contenido del centro de la pagina...
  140.     aqui va el contenido del centro de la pagina...
  141.     aqui va el contenido del centro de la pagina...
  142.     aqui va el contenido del centro de la pagina...
  143.     aqui va el contenido del centro de la pagina...
  144.     aqui va el contenido del centro de la pagina...
  145.     aqui va el contenido del centro de la pagina...
  146.     aqui va el contenido del centro de la pagina...
  147.     aqui va el contenido del centro de la pagina...
  148.     aqui va el contenido del centro de la pagina...
  149.     aqui va el contenido del centro de la pagina...
  150.     aqui va el contenido del centro de la pagina...
  151.     aqui va el contenido del centro de la pagina...
  152.     aqui va el contenido del centro de la pagina...
  153.     </div>
  154. </div>
  155. <body>
  156. </body>
  157. </html>


Saludos y gracias...
  #6 (permalink)  
Antiguo 05/09/2012, 08:23
Avatar de cristian_cena
Colaborador
  
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 15 años, 4 meses
Puntos: 269
Respuesta: El DIVs aumenta su tamano cuando aumenta el volumen de informacion
- Pon <div id="central"></div> dentro de <body></body>
- Agrega un reset al principio de tus estilos, aunque sea uno básico como: * {margin:0; padding:0;}
- Cuando necesites aplicar un conjunto de estilos a varios elementos html usa .class en lugar de #id. Ej: en tu css sería: .contenido_centro { /* estilos */} y en tu html sería <div class="contenido_centro></div>

Espero te sirva de ayuda.
  #7 (permalink)  
Antiguo 05/09/2012, 08:38
 
Fecha de Ingreso: septiembre-2012
Ubicación: La Habana
Mensajes: 32
Antigüedad: 12 años, 1 mes
Puntos: 1
Respuesta: El DIVs aumenta su tamano cuando aumenta el volumen de informacion
Hola Crisitan,

Segui tus indicaciones, pero todo me sigue igual.

Te paso los arreglos:

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
  5. <title>Registro</title>
  6. <link href="estilo.css" rel="stylesheet" type="text/css" />
  7. </head>
  8. <body>
  9. <div  id="central">
  10.     <div  class="contenido_centro">
  11.     aqui va el contenido del centro de la pagina...
  12.     aqui va el contenido del centro de la pagina...
  13.     aqui va el contenido del centro de la pagina...
  14.     </div>
  15.     <div class="contenido_centro">
  16.     aqui va el contenido del centro de la pagina...
  17.     aqui va el contenido del centro de la pagina...
  18.     aqui va el contenido del centro de la pagina...
  19.     aqui va el contenido del centro de la pagina...
  20.     aqui va el contenido del centro de la pagina...
  21.     aqui va el contenido del centro de la pagina...
  22.     aqui va el contenido del centro de la pagina...
  23.     aqui va el contenido del centro de la pagina...
  24.     aqui va el contenido del centro de la pagina...
  25.     aqui va el contenido del centro de la pagina...
  26.     aqui va el contenido del centro de la pagina...
  27.     aqui va el contenido del centro de la pagina...
  28.     aqui va el contenido del centro de la pagina...
  29.     aqui va el contenido del centro de la pagina...
  30.     aqui va el contenido del centro de la pagina...
  31.     aqui va el contenido del centro de la pagina...
  32.     aqui va el contenido del centro de la pagina...
  33.     aqui va el contenido del centro de la pagina...
  34.     aqui va el contenido del centro de la pagina...
  35.     aqui va el contenido del centro de la pagina...
  36.     </div>
  37. </div>
  38. </body>
  39. </html>


Código CSS: 
Ver original
  1. body {
  2.     background-color:#eee; 
  3.     font-family:Verdana, Arial, Helvetica, sans-serif;
  4.     font-size:11px;
  5.     color: #000;
  6. }
  7.  
  8. #central {
  9.  
  10. border: 1px solid #000;
  11.  
  12. margin:0; 
  13. padding:0;
  14.  
  15. overflow:hidden;
  16. width:780px;
  17. height:auto;
  18. margin:auto;
  19. }
  20.  
  21. .contenido_centro {
  22. border: 1px solid #FF0000;
  23. width:500px;
  24.  
  25. margin:auto;
  26. margin-top:3px;
  27. margin-bottom:3px;
  28. }


PD: Esto me tiene al volverme loco...
  #8 (permalink)  
Antiguo 05/09/2012, 10:50
 
Fecha de Ingreso: septiembre-2012
Ubicación: La Habana
Mensajes: 32
Antigüedad: 12 años, 1 mes
Puntos: 1
Respuesta: El DIVs aumenta su tamano cuando aumenta el volumen de informacion
He reseteado toda la web, sigo con el mismo problema.

Código CSS: 
Ver original
  1. *{
  2.     margin:0;
  3.     padding:0;
  4. }
  5.  
  6. body {
  7.         background-color:#eee;
  8.         font-family:Verdana, Arial, Helvetica, sans-serif;
  9.         font-size:11px;
  10.         color: #000;
  11. }
  12.      
  13. #central {
  14.  
  15.     border: 1px solid #000;
  16.     overflow:hidden;
  17.     width:780px;
  18.     height:auto;
  19.     margin:auto;
  20. }
  21.      
  22. .contenido_centro {
  23.     border: 1px solid #FF0000;
  24.     width:500px;
  25.     margin:auto;
  26.     margin-top:3px;
  27.     margin-bottom:3px;
  28.     }
  #9 (permalink)  
Antiguo 05/09/2012, 15:50
Avatar de cristian_cena
Colaborador
  
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 15 años, 4 meses
Puntos: 269
Respuesta: El DIVs aumenta su tamano cuando aumenta el volumen de informacion
parece que height: auto; y margin: auto; están demás.
Los divs (cajas de bloque) se centran (horizontalmente) con margin: 0 auto; /* siendo cero para top y left y auto para left y right*/ (googlear: "css shorthand" o "css forma corta")

En este ejemplo lo veo bien. Cualquier cosa colocá un link o algo para hablar sobre una cosa que podamos ver los dos.

Saludo.

Etiquetas: contenido, divs, informacion, volumen, aumentar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 00:59.