Faux equal height columns hack using pure CSS / Sass (with jQuery fallback for IE 6 & 7)

screen.css

.two-columns {
  overflow: hidden;
  *zoom: 1;
  position: relative;
}

.two-columns .column-one, .two-columns .column-two {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  padding: 15px;
}

.two-columns .column-one:before, .two-columns .column-two:before {
  position: absolute;
  top: 0;
  content: "";
  height: 100%;
  z-index: -1;
}

.two-columns .column-one {
  float: left;
  width: 590px;
}

.two-columns .column-one:before {
  left: 0;
  background: white;
  width: 590px;
}

.two-columns .column-two {
  float: left;
  width: 370px;
}

.two-columns .column-two:before {
  right: 0;
  background: #fafafa;
  width: 370px;
}

screen.sass

@import "compass"

.two-columns
  +clearfix
  position: relative
  .column-one, .column-two
    +box-sizing(border-box)
    padding: 15px
    &:before
      position: absolute
      top: 0
      content: ""
      height: 100%
      z-index: -1
  .column-one
    $width: 590px
    float: left
    width: $width
    &:before
      left: 0
      background: #fff
      width: $width
  .column-two
    $width: 370px
    float: left
    width: $width
    &:before
      right: 0
      background: $lightest-grey
      width: $width

site.js

$(document).ready(function() {
  
  $('.column-one, .column-two').before('');
  
});

This could easily get extracted to a better reusable mixin with conditionals and variables for easier usage too.