Splitting the HTML page using div - html

Question

I know this has been asked quite a few times here. But I'm not very experienced with HTML and am stuck following solutions suggested here.
My current implementation is like this. But the problem is if I stretch and adjust the browser window size, the borders of the four equal-sized quadrants follows. What I would like is:
The top area would be reserved for a load button and filter boxes.
The rest of the area would be divided up into four equally-sized quadrants.
When the browser window is adjusted, all five of these areas should not overflow into each other.
If I insert <div>'s inside each quadrant to draw plots, they should gracefully fall into place and will occupy four equally-sized areas regardless of the browser's size change.
What I'm trying to achieve looks something like in the picture below:
Thank you in advance for the help!

Answer 1

You can divide your 4 quadrants into 2 rows.
And give each row 100% width
and each quadrant a width of 50%
also,
make quadrants float left.
.row {
width: 100%;
padding: 0;
margin: 0;
}
.quad {
border: 1px solid black;
border-radius: 8px;
width: 49%;
padding: 0;
margin: 0;
height: 200px;
float: left;
}
<div>
<select><option>A</option></select>
<input type="button" value="Filter" />
</div>
<div class="row">
<div class="quad">
1 of 4
</div>
<div class="quad">
2 of 4
</div>
</div>
<div class="row">
<div class="quad">
3 of 4
</div>
<div class="quad">
4 of 4
</div>
</div>
Note: I have given 49% to quadrants so as to accommodate borders (they have 2 px width [1px each side])
You can also do this using flex CSS if you are targetting newer versions of browsers only.
In that case, you do not have to worry about widths.
Just give your row div : display: flex;
and your quadrants: flex: 1 1 auto;
Read more here about the flex display.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
.row {
display: flex;
}
.quad {
flex: 1 1 auto;
border: 1px solid black;
border-radius: 8px;
height: 200px;
}
<div>
<select><option>A</option></select>
<input type="button" value="Filter" />
</div>
<div class="row">
<div class="quad">
1 of 4
</div>
<div class="quad">
2 of 4
</div>
</div>
<div class="row">
<div class="quad">
3 of 4
</div>
<div class="quad">
4 of 4
</div>
</div>

Answer 2

Using bootstrap 4 you can easily create such an layout. Bootstrap makes it much easier for developers to create a layout.
If you wanna use bootstrap, you can do following. Bootstrap 4 uses flexbox instead of float which is +1 comparing to bootstrap 3.
.vh-100 {
min-height: 100vh;
}
.choose-plot {
padding-top: 15px;
padding-bottom: 15px;
}
.bordered {
border: 1px solid #ccc;
border-radius: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js" integrity="sha384-u/bQvRA/1bobcXlcEYpsEdFVK/vJs3+T+nXLsBYJthmdBuavHvAW6UsmqO2Gd/F9" crossorigin="anonymous"></script>
<div class="container-fluid d-flex h-100 flex-column vh-100">
<!-- I want this container to stretch to the height of the parent -->
<div class="row">
<div class="col choose-plot">
<strong class="mb-2">Add/remove COUNTRIES (max: 5), ADVERTISES (max 4), YEAR (max 1), and plot location below. Then, click 'load plot'.</strong>
<div class="row">
<div class="col-4">
<select class="custom-select">
<option>Choose plot</option>
</select>
</div>
<div class="col-8">
<button class="btn btn-primary">Load plot</button>
</div>
</div>
</div>
</div>
<div class="row flex-fill d-flex justify-content-start">
<div class="col-6 bordered">1 of 4</div>
<div class="col-6 bordered">2 of 4</div>
<div class="col-6 bordered">3 of 4</div>
<div class="col-6 bordered">4 of 4</div>
</div>
</div>

Answer 3

Dividing into rows too,
I suggest you to use box-sizing: border-box; so that when you set width to 50%, the borders sizes are taken into account.
.col {
width: 50%;
height: 160px;
float: left;
box-sizing: border-box;
border: 2px solid gray;
border-radius: 4px;
padding: 4px;
}
<div>Something here.</div>
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
</div>
<div class="row">
<div class="col">3</div>
<div class="col">4</div>
</div>
Hope it helps.