How to create such a layout? - html

Question

How do I create one layout in HTML + CSS?
The problem that I have is that I did not realize how to properly split screen.
Can you give a brief example please jsfiddle
Thanks in advance!
EDIT:
I put this example that please if you know to edit any variant of solving the problem. Very important ... the two bottom divs should always be square
https://jsfiddle.net/L3ttfL72/

Answer 1

For square divs, give them the same height and width. For square divs the size of a percentage of the window width, use vh.
div {
box-sizing: border-box;
}
.container {
width: 60vw
}
.banner {
height: 17em; /* whatever you want */
border-color:red; border-style:solid;
border-width: 6px 6px 2px;
}
.bottom {
float: left;
width: 30vw;
height: 30vw;
}
.left {
border-color:green; border-style:solid;
border-width:4px 3px 6px 6px;
}
.right {
border-color:blue; border-style:solid;
border-width:4px 6px 6px 3px;
}
.container::after {
clear: left
}
<div class="container">
<div class="banner">
The top div
</div>
<div class="bottom left">
bottom left
</div>
<div class="bottom right">
bottom right
</div>
</div>

Answer 2

Here is the code you requested. On a side note, I recommend brushing up on your html / css, this is a place to get assistance and posting questions similar is not recommended.
#numOne{
width:60%;
background:red;
height:60vh;
}
#squareOne{
background:green;
width:50%;
height:40vh;
float:left;
}
#squareTwo{
background:blue;
width:50%;
height:40vh;
float:left;
}
#wrapperDiv{
width:60%;
}
body{
margin:0;
padding:0;
}
http://codepen.io/dnwebdev/pen/waRQme
#numOne{
width:60%;
background:red;
height:60vh;
background-size:cover; background:url(http://lorempixel.com/output/cats-h-g-987-1010-10.jpg);
background-repeat: no-repeat;
background-position: center;
}
#squareOne{
background:green;
width:50%;
height:40vh;
float:left;
background-size:cover; background:url(http://lorempixel.com/output/cats-q-g-640-480-3.jpg);
background-repeat: no-repeat;
background-position: center;
}
#squareTwo{
background:blue;
width:50%;
height:40vh;
float:left;
background-size:cover; background:url(http://lorempixel.com/output/cats-q-g-640-480-3.jpg);
background-repeat: no-repeat;
background-position: center;
}
#wrapperDiv{
width:60%;
}
body{
margin:0;
padding:0;
}
<div id="container">
<div id="numOne">
</div>
<div id="wrapperDiv">
<div id="squareOne">
</div>
<div id="squareTwo">
</div>
</div>
</div>