How can I create this following style with CSS3? - html

Question

I would like to get this style in CSS3:
CSS3 layout
For now, I have the simplest thing, the middle square with the following code:
HTML (pretty irrelevant, but I guess the tag does not need to be a div tag):
<div id="divBorder">
</div>
CSS:
#divBorder{
border-style: solid;
border-width: 1px;
position: absolute;
width: 300px;
height: 300px;
z-index: 15;
top: 50%;
left: 50%;
margin: -110px 0 0 -160px;
}
So, I just have basically centered the middle square in the center of the screen and that's all, I can't find a way to do the other two half squares on both sides of the full one.
I hope you can help me, thank you so much in advance!

Answer 1

You can achieve the desired layout with the following markup, using flexbox.
body {
margin: 0;
}
main {
display: flex;
flex-direction: column;
height: 100vh;
}
header {
flex: 1;
background-color: mediumspringgreen;
}
div {
flex: 4;
display: flex;
background-color: darkviolet;
}
section {
flex: 1;
}
section:nth-child(even) {
flex: 2;
background-color: darkorchid;
}
footer {
flex: 1;
background-color: deeppink;
}
<main>
<header></header>
<div>
<section></section>
<section></section>
<section></section>
</div>
<footer></footer>
</main>

Answer 2

.inner {
border:solid;
}
.outer {display: flex;
flex-direction:row;}
.side {width: 25%; height: 50px;}
.center {width: 50%; height: 50px}
<div class="outer">
<div class="side inner"></div>
<div class="center inner"></div>
<div class="side inner"></div>
</div>
You can use flexbox to do this. You can either set the width in procentage or you can look into sizing it with flexbox.