HTML/CSS set div to height of sibling

Question

I have 2 div\'s contained in a third. One of the contained div\'s is floated left, the other floated right. I would like the 2 sibling div\'s to always be at the same heig

Answer 1

If you know which of the inner div's you want to set the height of the page layout you can do something like this: http://codepen.io/anon/pen/vOEepW

Setting the containing div to position: relative and then setting one of the inner divs to position absolute allows the other, "un-styled" div to effectively control the height of both.

.container {
  position: relative;
}
.main-content {
  width: 80%;
  margin-left: 20%;
  height: 300px;
  background-color: red;
}
.secondary-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 20%;
  overflow-y: scroll;
}

It is also possible to do this, and perhaps easier using flexbox, but that has some browser support issues.