Segue um modelo feito em flex. Aqui tem um guia completo que pode te ajudar. https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Exiba os código em tela cheia para ver a responsividade e como se comportam. Em telas menores que 768px eles fica com o box maior encima e os menores embaixo. Em telas grandes ficam lado a lado.
Os valores aqui estão todos em % por isso fica bem responsivo, e a altura do container
eu deixei com 50vh
, 50% da altura do body
. Mas vc pode colocar um valor fixo aqui em px se quiser deixa a altura sempre com om tamanho definido .container { height: 50vh; }
Segue o código referente a imagem acima:
OBS: Eu poderia ter otimizado mais o CSS pois alguma propriedades se repetem muito, mas preferi deixar assim para facilitar o entendimento.
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
border: 1px solid #000;
}
.container {
width: 100%;
height: 50vh;
display: flex;
justify-content: center;
align-items: center;
}
.left {
width: 50%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.right {
width: 50%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.box {
width: 50%;
height: 50%;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width:768px) {
.container {
flex-direction: column;
}
}
.left, .right {
width: 100%;
}
}
<div class="container">
<div class="left">esquerda</div>
<div class="right">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
</div>
Com Float
Mesmo layout acima, porém usando Float
. Apenas para fins didáticos para vc ver como ficaria usando Float
. Apesar de eu não recomendar, e de ficar mais complicado de alinhar ao centro os elementos internos.
Exiba o código abaixo
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
border: 1px solid #000;
}
.container {
width: 100%;
height: 50vh;
}
.left {
width: 50%;
height: 100%;
float: left;
}
.right {
width: 50%;
height: 100%;
float: left;
}
.box {
width: 50%;
height: 50%;
float: left;
}
@media screen and (max-width:768px) {
.left {
width: 100%;
height: 50%;
float: left;
}
.right {
width: 100%;
height: 50%;
float: left;
}
}
<div class="container">
<div class="left">esquerda</div>
<div class="right">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
</div>