Seeking guidance on achieving a specific stacking order within a flex container. I have a simple footer divided into 3 sections - left and right divs with 100% height and 20% width each. The middle section should flex to fill the remaining space, but it needs to be split vertically in half with top and bottom divs at 50% height each. I'm struggling to determine the proper positioning using absolute, fixed, etc. or floating elements.
Apologies for the confusion, here is the CSS code inside the flex container:
.footer_left_box {
position: absolute;
display: inline-block;
float: left;
left: 0;
width: 10%;
height: 100%;
background-color: #C9D329;
}
.footer_middle_top_box {
position: relative;
display: inline-block;
width: 80%;
height: 50%;
background-color: #2BB851;
}
.footer_middle_bottom_box {
position: relative;
display: inline-block;
width: 80%;
height: 50%;
background-color: #3954D4;
}
.footer_right_box {
position: absolute;
right: 0;
width: 10%;
height: 100%;
background-color: #E33538;
}
This serves as a reference for the desired layout.