I am looking to arrange <div> elements in a specific layout where one is at the top, three are in the middle in a row, and one is at the bottom without any extra space. It is necessary that there remains a space between the middle <div>s and the bottom one.
https://i.sstatic.net/N5AFS.png
The height of the top and bottom elements should be 15%, while the middle ones should have 70%. Additionally, the bottom element should slightly extend out of the .container.
This setup pertains to the <body> tag.
<div id="wrap">
<div class="container">
<div></div><div></div><div></div><div></div><div></div>
</div>
</div>
Below is the corresponding CSS style information.
#wrap{
width: 90%;
height: 500px;
margin: 0 auto;
border: 4px solid black;}
.container{
width: 93.75%;
height: 492px;
margin: 0 auto;
border: 4px solid black;}
.container div{
/*display: block;*/
height: 100%;}
.container div:first-child{
height: 15%;
background: #003153;}
.container div:first-child +div{
display: inline-block;
width: 33.33333333333333333%;
height: 70%;
background: #c33;}
.container div:first-child +div +div{
display: inline-block;
width: 33.33333333333333333%;
height: 70%;
background: #2dcc70;}
.container div:first-child +div +div +div{
display: inline-block;
width: 33.33333333333333333%;
height: 70%;
background: #e75d5d;}
.container div:first-child +div +div +div +div{
/*display: block;*/
height: 15%;
background: #003153;}
Should I make modifications using the display: property to achieve this arrangement?