3 divs on same row inside other div

Question

I've created 3 columns of divs inside another div and stacked on the moment how to make them the same height as the mid one and situate on the top of the div. Can you please suggest what can be done to achieve that?

.div-box {
  width: 500px;
  margin: 0 auto;
}

.left {
  width: 200px;
  height: 100px;
  background-color: red;
  display: inline-block;
}

.mid {
  width: 200px;
  display: inline-block;
}

.right {
  width: 50px;
  height: 100px;
  background-color: black;
  display: inline-block;
}

<div class='div-box'>
  <div class='left'></div>
  <div class='mid'>
    <p>Cardigan knausgaard kinfolk humblebrag hashtag. Chambray banh mi mustache, quinoa flannel craft beer tacos vinyl. Ethical swag everyday carry, typewriter crucifix mustache cornhole next level iPhone squid. Slow-carb flannel chambray man bun, migas
  </p>
  </div>
  <div class='right'></div>
</div>

http://callmenick.com/post/css-equal-height-columns-three-different-ways check this link — Pbk1303, Feb 09 '16 at 22:54
Possible duplicate of [Sibling divs match height in container](http://stackoverflow.com/questions/12716525/sibling-divs-match-height-in-container) — Asim K T, Feb 10 '16 at 08:25

potashin · Answer 1 · 2016-11-08T18:22:55.863

You can use table layout:

.div-box {
  width: 500px;
  margin: 0 auto;
  display: table;
}

.div-box > div{display: table-cell}

.left {background-color: red}

.mid {width: 200px}

.right {background-color: black}

<div class='div-box'>
  <div class='left'></div>
  <div class='mid'>
    <p>Cardigan knausgaard kinfolk humblebrag hashtag. Chambray banh mi mustache, quinoa flannel craft beer tacos vinyl. Ethical swag everyday carry, typewriter crucifix mustache cornhole next level iPhone squid. Slow-carb flannel chambray man bun, migas
  </p>
  </div>
  <div class='right'></div>
</div>

1

you beat me by a second :) – dippas Feb 09 '16 at 22:45

score 1 · Answer 2 · answered Feb 09 '16 at 22:50

1

Try this js plugin, it should cover everything you need; jquery-match-height.

answered Feb 09 '16 at 22:50

Amin Gharavi

452
3
14

score 1 · Answer 3 · edited May 23 '17 at 12:06

A couple a ways you could go about this...

Flexbox:

.div-box {    
  display: flex;
  align-items: center;
}

This will work in modern browsers (> ie9).

Tables:

.div-box {
  display: table; 
  table-layout: fixed;
}

/*catches immediate children of div-box*/
.div-box > * {
  display: table-cell;
}

This will work in pretty much all cases, but the Internet Gods may curse you and your descendants for using tables to display non-tabular data. See this question for more information.

JavaScript:

      var childrenOfDivBox = document.getElementsByClassName("div-box")[0].getElementsByTagName("div"); /*grabs a collection of all the divs under div-box*/

      /*the middle div is the second child, hence childrenOgDivBox[1], due to zero-based counting */   
      var middleHeight = childrenOfDivBox[1].offsetHeight;

      childrenOfDivBox[0].style.height = middleHeight; 
      childrenOfDivBox[2].style.height = middleHeight;

This will work in most browsers (> ie8), and could be massaged to work in all browsers (getElementsByClassNames won't work below ie 9, but you could change the elements to be identified via ID to work around this).

Also note that margins on the 'p' tag on the middle div may complicate the alignment.

thank you for explaining the possible problems with SEO in future. I will definitely take that in consideration. — Adrian, Feb 11 '16 at 17:22

score 1 · Accepted Answer · answered Feb 10 '16 at 08:23

I would go with flex-box since it have high support now.

.div-box {
  width: 500px;
  margin: 0 auto;
  display: flex;
}

.left {
  width: 200px;
  background-color: red;
  display: flex;
}

.mid {
  width: 200px;
  display: flex;
}

.right {
  width: 50px;
  background-color: black;
  display: flex;
}

<div class='div-box'>
  <div class='left'></div>
  <div class='mid'>
    <p>Cardigan knausgaard kinfolk humblebrag hashtag. Chambray banh mi mustache, quinoa flannel craft beer tacos vinyl. Ethical swag everyday carry, typewriter crucifix mustache cornhole next level iPhone squid. Slow-carb flannel chambray man bun, migas
  </p>
  </div>
  <div class='right'></div>
</div>

thank you this is a very nice method and I will definitely try it. — Adrian, Feb 11 '16 at 17:23

3 divs on same row inside other div

4 Answers4