Float Multiple Fixed-width / Varible-height Boxes Into 2 Columns

I'll try to explain this as best I can. I have multiple divs that are fixed-width but variable height. I want to float these boxes into two columns inside a fixed-width container.

Solution 1:

You need to alternate left and right floating on your boxes.

  .box:nth-child(2n+1){
    float: left;
  }
  .box:nth-child(2n){
    float: right;
  }

Warning this code is not compatible with older browsers, for those you might want to set a different CSS classes programmatically every other box.

Solution 2:

Instead of working horizontally, work vertically.

Now:

L     R
1 ==> 2
3 ==> 4
5 ==> 6

Other way:

L   R
1   2
\/  \/
3   4
\/  \/
5   6

So basically, put all the odd divs in the left column, all the even divs in the right column. If you create these divs dynamically, first group them by odd and even, and then add them to the appropriate column.