Foros del Web » Creando para Internet » CSS »

Problemas con divs desacomodadas

Estas en el tema de Problemas con divs desacomodadas en el foro de CSS en Foros del Web. Hola a todos, soy nuevo en este foro, tengo un problema con unos divs y quería saber si es posible hacer lo que quiero. Les ...
  #1 (permalink)  
Antiguo 02/06/2009, 08:34
 
Fecha de Ingreso: junio-2009
Mensajes: 3
Antigüedad: 8 años, 6 meses
Puntos: 0
Exclamación Problemas con divs desacomodadas

Hola a todos, soy nuevo en este foro, tengo un problema con unos divs y quería saber si es posible hacer lo que quiero. Les cuento, tengo un sistema en el cual se carga contenido dinamicamente en divs, estos divs tienen float a la izquierda con un ancho de 300px por lo que alcance de alto, el problema es que mi contenedor mide 1000px aprox. y los divs se van cargando uno al lado del otro, al superar los 3 divs que suman 900px en total (300 + 300 + 300) el 4to div tendría que ir debajo del primero sin dejar un espacio en blanco, no les puedo dejar imagenes para mostrales, si me entinden les agradecere
  #2 (permalink)  
Antiguo 02/06/2009, 10:58
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problemas con divs desacomodadas

Hola Nicolás
Bienvenido a FdW
La explicación de lo que tienes, perfecta.
Lo que no me ha quedado claro es cómo quieres y dónde que se posicione el el 4º div.
¿Podrías ser algo más preciso? Y si puedes, pon el código css y html de esa parte. Gracias.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 02/06/2009, 11:56
 
Fecha de Ingreso: junio-2009
Mensajes: 3
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: Problemas con divs desacomodadas

Hola el 4to div tendria que continuar debajo del primero, quedaria de esta forma:
Código HTML:
-----   -----  -----
|    | |     | |    |
| 1  | | 2   | | 3  |
|    | |     | |    |
|    | ------  |    |
-----  ------  ------
-----  |     | ------
|    | | 5   | |  6 |
| 4  | |     | |    |
-----  ------  ------
Algo así, como ves el div 2 es mas corto que los otros y el resto se acomoda, pero si pongo float me quedaría asi:
Código HTML:
-----   -----  -----
|    | |     | |    |
| 1  | | 2   | | 3  |
|    | |     | |    |
|    | ------  |    |
-----          ------
-----  ------- ------
|    | | 5   | |  6 |
| 4  | |     | |    |
-----  ------ ------
de esa forma queda un espacio en blanco entre el 2 y el 5 y eso es lo que no quiero que pase, el css tendria una sola clase para todos:

Código HTML:
.div{
width:300px;
float:left;
border:1px solid #ccc;
margin: 5px;
}
Espero una respuesta, muchas gracias.

Última edición por nicolas_jnm; 02/06/2009 a las 12:08
  #4 (permalink)  
Antiguo 02/06/2009, 12:30
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problemas con divs desacomodadas

Buenos dibujitos (casi parece un tema de diseño gráfico )

Para eso necesitarás:
O montar una estructura de lo que se conoce como "columnas equilibradas" y presentar los datos agrupados de tres en tres (en la horizontal)

O si son datos tabulados utilizar tablas.

Cualquiera que sea la opción, necesitarás algo más que utilizar un div

P.D.: lo de que esperas una respuesta es tan obvio/común/lógico/ (e innecesario manifestarlo por escrito) que si no la esperases nos harías plantearnos muchas cosas.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 02/06/2009, 12:40
 
Fecha de Ingreso: junio-2009
Mensajes: 3
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: Problemas con divs desacomodadas

En realidad si ves el div 2 y el 5 te das cuenta que si tiene float queda un espacio en blanco si el 1 y el 3 son más altos pero lo que yo necesito es que no quede ese espacio en blanco y que el div 5 o puede ser cualquiera, pero en este caso es el div nº 5 tendría que subir y mantener los 5px de margenes. Es como una especie de "tetris" que se tendrian que acomodar esas cajitas.
  #6 (permalink)  
Antiguo 02/06/2009, 15:49
Avatar de WillxD  
Fecha de Ingreso: febrero-2009
Ubicación: Lima =D!
Mensajes: 82
Antigüedad: 8 años, 9 meses
Puntos: 3
Respuesta: Problemas con divs desacomodadas

Te recomendaría hacer un contenedor el cual tenga todos tus divs. Y a tus divs 1,2,4 y 5 les pongas un float:left y a tus divs 3 y 6 un float:right. Mira algo así:

Código html:
Ver original
  1. <div id="contenedor">
  2.  
  3.           <div id="principal>
  4.                   <div class="box1">
  5.                    contenido 1
  6.                   </div>
  7.  
  8.                   <div class="box1">
  9.                    contenido 2
  10.                   </div>
  11.  
  12.                   <div class="box1">
  13.                    contenido 4
  14.                   </div>
  15.  
  16.                   <div class="box1">
  17.                    contenido 5
  18.                   </div>
  19.  
  20.           </div>
  21.  
  22.          <div id="derecho">
  23.  
  24.                   <div class="box1">
  25.                    contenido 3
  26.                   </div>
  27.  
  28.                   <div class="box1">
  29.                    contenido 6
  30.                   </div>
  31.          </div>
  32.  
  33. </div>

y en tu CSS algo así:

Código css:
Ver original
  1. #contenedor{
  2.        width:960px;
  3.        margin:auto;
  4. }
  5.  
  6. #principal{
  7.     width:600px;
  8.     float:left;
  9. }
  10.  
  11. #derecho{
  12.     width:300px;
  13.    float:right;
  14. }
  15.  
  16. .box1{
  17.   width:300px;
  18.   float:left;
  19. }

Los anchos ya lo vas cambiando y le agregas los margin. Espero haberte dado alguna idea.

Salu2
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




La zona horaria es GMT -6. Ahora son las 06:17.