html - CSS parallel columns

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>