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>

Liftoff · Accepted Answer · 2021-01-05 18:30:17Z

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>

Imran Rafiq Rather · Accepted Answer · 2021-01-05 18:54:42Z

1

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>

edited Jan 5, 2021 at 18:54

answered Jan 5, 2021 at 18:42

Imran Rafiq Rather

8,2881 gold badge23 silver badges41 bronze badges

2 Comments

Tristan Tran Over a year ago

Thanks very much for the tip. I will try this out.

Imran Rafiq Rather Over a year ago

U are most welcome... This saves lots of Efforts in the long run and code becomes performant :) If you need a good resource to learn CSS-Grid, I can share :)

Collectives™ on Stack Overflow

CSS parallel columns

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related