<h3>2 column layout with floating elements</h3>
<div class="floated">
  <div class="first">first</div>
  <div class="second">second</div>
  <div class="third">third</div>
  <div class="fourth">fourth</div>
</div>

<h3>2 column layout with floating elements (every odd element clears its preceding floating elements)</h3>
<div class="rowed">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
  <div class="fourth"></div>
  <div class="first"></div>
  <div class="second"></div>
</div>

.floated, .rowed {
  width: 400px;
  overflow: hidden; /* no dropdown, so this hack works here */
}

.first, .second, .third, .fourth {
  box-sizing: border-box;
  background-color: black;
  border: 3px dashed #999;
  width: 200px;
  float: left;
  color: white;
}

.floated .first,
.rowed .first{
  height: 300px;
}
.floated .second,
.rowed .second{
  height: 200px;
}
.floated .third,
.rowed .third{
  height: 400px;
}
.floated .fourth,
.rowed .fourth{
  height: 350px;
}

.rowed *:nth-child(odd) {
  clear: both;
}