CSS Layout How to - Limit height aligning another column with a dynamic height

Question

We would like to know how to limit height aligning another column with a dynamic height.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#box {<!--from ww w  . j a v a2  s . c om-->
  width: 50%;
  margin: 20px auto;
  border: solid red 2px;
  overflow: hidden;
  position: relative;
}

.col1 {
  width: 50%;
  background-color: #EEEEEE;
}

.col2 {
  position: absolute;
  width: 50%;
  top: 0px;
  left: 50%;
  background-color: #CCCCCC;
  height: 100%;
  overflow-y: auto;
}
</style>
</head>
<body>
  some text
  <div id='box'>
    <div class='col1'>
      2 lines, this is 1st<br /> 2nd and <br /> final line
    </div>
    <div class='col2'>
      5 lines, this is 1st<br /> 2nd line (below is hidden)<br /> blah<br />
      blah<br /> blah
    </div>
  </div>
  some text
  <div id='box'>
    <div class='col1'>
      2 lines, this is 1st<br /> 2nd and final line
    </div>
    <div class='col2'>1 line only</div>
  </div>
  some text
</body>
</html>

The code above is rendered as follows: