[CSS] Posicion de divs en top de otro div

[patilanz]

Hola tengo estos divs:



Tienen los mismos elementos en cada uno. Hasta aquí todo bien pero luego al cambiar el height (display:none en un div dentro) de uno de los divs (el primero) se descoloca y se queda mas arriba



Yo quiero este resultado:



Con float: left los dos primeros se quedan bien pero el tercero no esta al lado del primero sino mas abajo y tampoco lo puedo usar porque utilizo el contenido de estos divs para el height del padre.
Alguna idea?

Un saludo

[ivancea96]

Podrías poner los 2 divs de la izquierda dentro de otro div

[3n31ch]

float right? xD!

(PD: es broma)

So, yo creo que tendras que acudir a hacer lo que dijo ivancea, o hacer magia con transform, pero la verdad es que de otra manera lo veo muy dificil si solo usas css puro

[EFEX]

Si los elementos tienen diferentes tamaños podes usar flex..

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Si no existen soluciones en js como..

http://packery.metafizzy.co/

[patilanz]

Podrías poner los 2 divs de la izquierda dentro de otro div

No puedo porque el usuario es el que genera todo el contenido.

Si los elementos tienen diferentes tamaños podes usar flex..

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Si no existen soluciones en js como..

http://packery.metafizzy.co/

Existe flex con display block de modo de poder usar elementos con position: absolute dentro del div con flex ?

La librería es perfecta 

Gracias

[Usuario Invitado]

Yo lo haría con FlexLayout. Puedes ver éste JsFiddle que te preparé. Clickea el cuadro azul para que se vuelva más pequeño, y luego vuélvelo a clickear para que se restablezca su tamaño.

Saludos.

[EFEX]

Existe flex con display block de modo de poder usar elementos con position: absolute dentro del div con flex ?

No veo por que no seria posible..

https://jsfiddle.net/dmh0341L/

[patilanz]

Me confundí con lo de position: absolute 

Luego el ejemplo de Gus Garsaky esta perfecto pero no consigo adaptarlo a mis divs.
Con en el padre:

Código (css) [Seleccionar] Expandir

display: flex;
flex-flow: column wrap;
align-items: flex-start;

Resultado:



Con:

Código (css) [Seleccionar] Expandir

display: flex;
flex-flow: row wrap;
align-items: flex-start;

Resultado:



Quiero que el 3 suba hasta el 1 y el 4 se vaya a la izquierda si queda espacio.


En este fiddle -> http://jsfiddle.net/wLe36cnq/4/
Al disminuir de tamaño al azul el rojo debería de subir. ???

Gracias

[Usuario Invitado]

Lo que pasa es que estás usando row en lugar de column. Mira éste nuevo JsFiddle que te hice. Clickea cualquier cuadro y se redimensionará, para que verás el flujo que toman las cajas.

[patilanz]

Lo que pasa es que estás usando row en lugar de column. Mira éste nuevo JsFiddle que te hice. Clickea cualquier cuadro y se redimensionará, para que verás el flujo que toman las cajas.

Gracias por el ejemplo, pero yo quiero que cuando tienen el height pequeño se alinee al a derecha.



Y si hay mas divs que haga como columnas. Ya se que se puede conseguir agregando dos contenedores pero no es lo que quiero.
En tu fiddle funciona bien pero cuando los cuatro tienen el height pequeno se queda como una fila.

Buen resultado