CSS: Floating multiple elements with different heights on multiple rows?

Question

I\'m trying to organize divs into two columns, but not force them into rows. I\'m also trying to keep the vertical spacing between the divs a const

Answer 1

Try this.. http://jsfiddle.net/rymfev8c/1/

HTML

CSS

body {
  padding: 40px;
}

.module {
  height: 50px;
  width: 45%;
  margin-right: 3%;
 margin-bottom: 60px;
  background: yellow;
  float: left;
}

.module:nth-child(odd) {
  height: 100px;
  background: green;
 margin-bottom: 5px;
}
.module:nth-child(3n) {
  height: 200px;
  background: orange;
  margin-bottom: 5px;
}

omg its 3 years old..