Equalise Height of a Sibling with CSS only?

Question

Is there a way of making a div the same height as a sibling just with CSS, or is this only achievable with javascript?

In the example i have two divs in a wrapper div, and I would like the one on the left to be the same size as the one on the right.

Code is below.

#wrapper {width: 50%; height; 200px;}
#box1 {background: red;}
#box2 {background: blue; height: 100px;}
.box {float: left; color: white; width: 50%;}

<div id="wrapper">
  <div class="box" id="box1">Box 1</div>
  <div class="box" id="box2">Box 2</div>
</div>

score 4 · Accepted Answer · answered Aug 27 '17 at 13:30

You can use display: flex on the wrapper (this works because align-items property is stretch by default) - see demo below:

#wrapper {display: flex;width: 50%; height; 200px;}
#box1 {background: red;}
#box2 {background: blue; height: 100px;}
.box {float: left; color: white; width: 50%;}

<div id="wrapper">
  <div class="box" id="box1">Box 1</div>
  <div class="box" id="box2">Box 2</div>
</div>

Equalise Height of a Sibling with CSS only?

1 Answers1