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.