¿Como agrupar 3 div de de esta forma ??

iniciopublic · 22 Ene 2014

hola a todos tengo una duda tengo 3 div y quisiera ponerlos de la siguiente manera

2 div ponerlos uno sobre el otro y el otro div ponerlo al lado pero que abarque la altura de los 2 primeros div juntos

¿como podria hacerlo en css?

saludos

GGalizzi · 22 Ene 2014

Necesitas 4 divs entonces. Ese cuarto contiene los 3 divs.

Al div que queres al costado le pones el float que corresponde, con un height de 100%, osea va a tener todo el alto del padre, y ese padre contiene a esos 2 divs que están uno sobre el otro.

ejemplo simple:
http://jsbin.com/oHAVOnU/3/edit?html,css,output

iniciopublic · 22 Ene 2014

GGalizzi dijo:
Necesitas 4 divs entonces. Ese cuarto contiene los 3 divs.

Al div que queres al costado le pones el float que corresponde, con un height de 100%, osea va a tener todo el alto del padre, y ese padre contiene a esos 2 divs que están uno sobre el otro.

ejemplo simple:
JS Bin - Collaborative JavaScript Debugging

gracias lo probare

estudiseno · 22 Ene 2014

La altura 100% tienes que tenerla desde el primer div para que tenga efecto, lo normal que es que le des una altura fija a los divs, como yo prefiero no usar float para maquetación ahí va mi ejemplo.

<style>
.alto {height:100%;}
.cien {width:100%;}
.medio {width:49%;}
.bloque {vertical-align: top; display: inline-block;margin: auto;}
</style>
<div class="alto">
<div class="medio bloque"><div class="cien"></div><div class="cien"></div></div>
<div class="medio bloque alto"></div>
</div>

Nightwalker · 22 Ene 2014

cual es el problema de usar float en la maquetacion? se puede ver mal en algun navegador o moviles?

estudiseno · 22 Ene 2014

tema de gustos

Nightwalker dijo:
cual es el problema de usar float en la maquetacion? se puede ver mal en algun navegador o moviles?

Ningun problema es tema de gustos.Pero lo utilizo para algo mas especifico que el ejemplo anterior. Cada cual que haga lo que quiera. De todas maneras si empiezas con float y tienes cinco divs se lo tienes que aplicar pero si despues quieres hacer un theme responsive le tienes que eliminar el atributo. Usando mi ejemplo no es necesario reiniciar el atributo simplemente darle el ancho que sea necesario.Un saludo.

Nightwalker · 22 Ene 2014

bien entonces tenes una razon, es que es conveniente para cuando haces un theme responsive

GGalizzi · 22 Ene 2014

Hmm, pero si lo haces mobile-first no tenes ese problema.

Y hoy en día hacer las cosas mobile-first es la mejor idea.