Equal height div

by charmis

HTML

<div id="container">
  <div id="left-col">
    <p>Test content</p>
    <p>longer</p>
  </div>
  <div id="right-col">
    <p>Test content</p>
  </div>
</div>

CSS

#container {
  overflow: hidden;
  width: 100%;
}

#left-col {
  float: left;
  width: 40%;
  background-color: orange;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

#right-col {
  float: left;
  width: 40%;
  margin-right: -1px;
  /* Thank you IE */
  background-color: red;
  padding-bottom: 200em;
  margin-bottom: -200em;
}