make div span vertically all available height

Question

The red and the green divs are aligned one next to another. How can make the red div be the same height as the green div?

Answer 1

You should have a div that contains both elements and is clearfixed

<div class="wrapper clearfix">
  <div class="red"></div>
  <div class="green"></div>
</div>

You then add position relative to the wrapper:

.wrapper {
  /* remember this is clearfixed */
  position: relative;
}

You let the green container float to the right:

.green {
  float: right;
  width: 50%;
}

Then you position absolute the red and let it know that it should use all the space of the wrapper:

.red {
  position: absolute;
  left: 0;
  width: 50%;
  top: 0;
  bottom: 0;
}

Note that this case will only work when the green container is larger than the left one.