Problemas con divs desacomodadas

[nicolas_jnm]

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

[kseso?]

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.

[nicolas_jnm]

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.

[kseso?]

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.

[nicolas_jnm]

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.

[WillxD]

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:

<div id="contenedor">
 
          <div id="principal>
                  <div class="box1">
                   contenido 1
                  </div>
 
                  <div class="box1">
                   contenido 2
                  </div>
 
                  <div class="box1">
                   contenido 4
                  </div>
 
                  <div class="box1">
                   contenido 5
                  </div>
 
          </div>
 
         <div id="derecho">
 
                  <div class="box1">
                   contenido 3
                  </div>
 
                  <div class="box1">
                   contenido 6
                  </div>
         </div>
 
</div>
 

y en tu CSS algo así:

Código css:

#contenedor{
       width:960px;
       margin:auto;
}
 
#principal{
    width:600px;
    float:left;
}
 
#derecho{
    width:300px;
   float:right;
}
 
.box1{
  width:300px;
  float:left;
}
 

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

Salu2