CSS Floating Divs At Variable Heights [duplicate]

Answer 1

With a little help from this comment (CSS Block float left) I figured out the answer.

On every "row" that I make, I add a class name left.
On every other "row" that I make, I add a class name right.

Then I float left and float right for each of these class names!

The only complication is that my content order is reversed on the "right" rows, but that can be resolved using PHP.

Thanks for your help folks!

#holder{
  width:200px;
  border:1px dotted blue;
  display:inline-block;
}
.box{
  width:100px;
  height:150px;
  background-color:#CCC;
  float:left;
  text-align:center;
  font-size:45px;
}
.one{
  background-color:#0F0;
  height:200px;
}

.two{
  background-color:#0FF;
}

.three{
  background-color:#00F;
  float:right;
}

.four{
  background-color:#FF0;
  float:right;
}
.left{float:left;}
.right{float:right;}

  
1
  
2
  
4
  
3