Child #1 (left) won't stretch

HTML & CSS
1

How can I get the left div to stretch to the height of the right div, even though it has less content?

Thanks

<style>
.left{width:50px;float:left;background:#0099ff;position:absolute;}
.right{position:absolute;width:50px;float:right;background:#007774;height:auto;position:relative;display:block;}
.container{width:100px;background:#000000;overflow:hidden;display:inline-block;}
</style>

<div class="container">
<div class="left">
testing<br />
testing<br />
</div>


<div class="right">
testing<br />
testing<br />
testing<br />
testing<br />
</div>

</div>
2

You could do it like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>equal height</title>
	
<style media="all">
.container{width:100px;background:#000;display:table;}
.left, .right {display: table-cell; width: 50px;}
.left{background:#0099ff;}
.right{background:#007774;}
</style>
	
</head>

<body>

<div class="container">
  <div class="left">
  testing<br />
  testing<br />
  </div>

  <div class="right">
  testing<br />
  testing<br />
  testing<br />
  testing<br />
  </div>
</div>
</body>
</html>
3

Not gonna lie, I have been doing this for a long time now and have not seen that before. Works like a charm, thanks Ralph.

4

No worries. :slight_smile: Be aware that it won’t work on IE7 and under, though I consider them quite dead now anyway. :slight_smile: