¿Como agrupar 3 div de de esta forma ??

  • Autor Autor iniciopublic
  • Fecha de inicio Fecha de inicio

iniciopublic

Préstamo
Ómicron
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario popular!
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
 
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
 
Última edición:
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>
 
cual es el problema de usar float en la maquetacion? se puede ver mal en algun navegador o moviles?
 
tema de gustos

Nightwalker dijo:
cual es el problema de usar float en la maquetacion? se puede ver mal en algun navegador o moviles?
Hacer clic para expandir...
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.
 
bien entonces tenes una razon, es que es conveniente para cuando haces un theme responsive
 
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.
 
Hay que estar conectado o registrado para responder aquí.
Menú
Acceder
Registro