Three columns layout - set left and right div's heigth according to center div

Question

I need to make a three columns css layout (without setting the height and width).
The left and right div height need to set automatically according to the center div (center div height depends on its content)

I tried with position, height 100%, overflow, but something wrong, so I cleared my code and so for now here I'm standing:

.container {
  background-color: blue;
  overflow: hidden;
}

.left {
   background-color: green;
   float: left;
}

.right {
   background-color: yellow;
   float: left;
}

.center {
   background-color: red;
   float: left;
}

<div class="container">
    <div class="left"> < left</div>
    <div class="center"> 
       <p>Holisticly underwhelm process-centric architectures via functionalized quality vectors. Collaboratively transform turnkey total linkage rather than value-added technologies.</p>
     <p>Holisticly underwhelm process-centric architectures via functionalized quality vectors. Collaboratively transform turnkey total linkage rather than value-added technologies.</p>
    </div>
    <div class="right">right > </div>
</div>

thank you

This question has been asked since the dawn of time. There are however several answer to this question already on stackoverflow. I suspect this question will get flagged to close as a duplicate question. — DreamTeK, Aug 05 '15 at 07:32
I just search stackoverflow and found 102 pages for questions relating to Three columns layout. Check them out. http://stackoverflow.com/search?q=Three+columns+layout — DreamTeK, Aug 05 '15 at 07:33
possible duplicate of [three column layout equal height](http://stackoverflow.com/questions/5576500/three-column-layout-equal-height) — DreamTeK, Aug 05 '15 at 07:35

score 0 · Answer 1 · answered Aug 05 '15 at 07:34

0

Try this. .container Display: inline-flex; Flex-direction: row; If you want to center Justify-content: center.

answered Aug 05 '15 at 07:34

Gerardo Cordero

164
4
14

Pete · Accepted Answer · 2015-08-05T07:54:47.180

An alternative to display:flex is display:table

.container {
  background-color: blue;
  display: table;
  width: 100%; /*optional*/
}
.container > div {
  display: table-cell;
  vertical-align: top;
}
.left {
  background-color: green;
  width: 75px; /*optional*/
}
.right {
  background-color: yellow;
  width: 75px; /*optional*/
  text-align:right;
}
.center {
  background-color: red;
}

<div class="container">
  <div class="left">&lt; left</div>
  <div class="center">
    <p>Holisticly underwhelm process-centric architectures via functionalized quality vectors. Collaboratively transform turnkey total linkage rather than value-added technologies.</p>
    <p>Holisticly underwhelm process-centric architectures via functionalized quality vectors. Collaboratively transform turnkey total linkage rather than value-added technologies.</p>
  </div>
  <div class="right">right &gt;</div>
</div>

Three columns layout - set left and right div's heigth according to center div

2 Answers2