CSS parallel columns - html

Question

I am trying to create three parallel columns of the same width (33.3%) and height (100%). In each column, I want to split it vertically into 80% - 20% ratios. The code below seems straight forward, but I couldn't achieve that. If someone could advise?
Note that I keep the flex and wrap stuff in the inner parts because I will be adding elements into them later. Thanks.
#outer-container {
height: 500px;
width: 100%;
}
#left-container, #mid-container, #right-container {
background-color: #495052;
width: 33.3%;
height: 100%;
border: 1px solid;
border-color: #cae329; /*Bright citrus*/
overflow: auto;
}
#left-top-container, #mid-top-container, #right-top-container {
display: flex;
flex-wrap: wrap;
background-color: #495052;
width: 100%;
height: 80%;
overflow: auto;
}
#left-bottom-container, #mid-bottom-container, #mid-bottom-container {
display: flex;
flex-wrap: wrap;
background-color: yellow;
width: 100%;
height: 20%;
border: 1px solid;
border-color: #cae329;
overflow: auto;
}
<div id="outer-container">
<div id="left-container">
<div id="left-top-container">
</div>
<div id="left-bottom-container">
</div>
</div>
<div id="mid-container">
<div id=mid-top-container">
</div>
<div id="mid-bottom-container">
</div>
</div>
<div id="right-container">
<div id="right-top-container">
</div>
<div id="right-bottom-container">
</div>
</div>
</div>

Answer 1

You've got a few typos in your code. Notably a missing quotation mark on one of your ids in your HTML (mid-top-container), and a duplicate rule for #mid-bottom-container instead of #right-bottom-container.
Also, your columns are still display:block, so they will not stay on the same line. I changed them to display: inline-block; to fix that. Their widths should be calc(100% / 3) to make them exactly one third of the width. They need box-sizing: border-box to make the padding/border part of the width figure, and finally, the parent #outer-container needs font-size:0 to remove any white space between the columns.
#outer-container {
height: 500px;
width: 100%;
font-size: 0;
}
#left-container, #mid-container, #right-container {
display: inline-block;
background-color: #495052;
width: calc(100% / 3);
height: 100%;
border: 1px solid;
border-color: #cae329; /*Bright citrus*/
overflow: auto;
box-sizing: border-box;
}
#left-top-container, #mid-top-container, #right-top-container {
display: flex;
flex-wrap: wrap;
background-color: #495052;
width: 100%;
height: 80%;
overflow: auto;
}
#left-bottom-container, #mid-bottom-container, #right-bottom-container {
display: flex;
flex-wrap: wrap;
background-color: yellow;
width: 100%;
height: 20%;
border: 1px solid;
border-color: #cae329;
overflow: auto;
}
<div id="outer-container">
<div id="left-container">
<div id="left-top-container">
</div>
<div id="left-bottom-container">
</div>
</div>
<div id="mid-container">
<div id="mid-top-container">
</div>
<div id="mid-bottom-container">
</div>
</div>
<div id="right-container">
<div id="right-top-container">
</div>
<div id="right-bottom-container">
</div>
</div>
</div>

Answer 2

Though there are some Typos. But some un-necessary ids and CSS is also present in the Code.
You may try CSS-GRIDS and Flexbox (in a better way) to achieve the same with much lesser code so that the performance of the app increases.
Have removed all extra selectors.
CODEPEN: https://codepen.io/emmeiWhite/pen/RwGyBLO
*{
margin:0;
padding:0;
box-sizing:border-box;
}
#outer-container {
height: 500px;
display:grid;
grid-template-columns:repeat(3,1fr);
width: 100%;
}
.column-wrapper{
display:flex;
flex-direction:column;
background-color: #495052;
border: 1px solid;
border-color: #cae329; /*Bright citrus*/
}
.top-section{
height:80%;
}
<div id="outer-container">
<div class="column-wrapper">
<div class="top-section">
left top
</div>
<div>
bottom
</div>
</div>
<div class="column-wrapper">
<div class="top-section">
mid-top
</div>
<div>
mid-bottom
</div>
</div>
<div class="column-wrapper">
<div class="top-section">
right-top
</div>
<div>
right-bottom
</div>
</div>
</div>