CSS - HTML Elements in Columns, Vertically Ordered (Taxonomy Super Select example)

Wanted to post an example of how to order generic HTML elements in vertically-ordered columns using pure CSS. The use-case I was working with was being able to have two vertically-ordered columns of checkboxes using the Taxonomy Super Select Module (http://drupal.org/project/taxonomy_super_select).

If anyone has a better way to do this, feel free to post away.

Explanation Video and Source Code:

http://www.youtube.com/watch?v=WzyNVoZ6hog .

<style type="text/css">
  div.parent {
    /* Demo only: */ background-color:lightgray;
    /* Demo only: */ overflow:hidden;
    width:200px;
	}
  div.parent div {
    /* Demo only: */ border:1px dashed gray;
    width:49%;
    display:inline-block; /* This may or may not be necessary, depending on if you're working with DIVs, LIs, etc. */
    float:left; /* For IE and older browsers. They will see two columns, but with horizontal ordering. */
	}

    /* The following will be understood by all current browsers EXCEPT for Internet Explorer. */
    /* Select all DIVs from the fourth child on: */
    div.parent div:nth-child(n+4){
      /* Demo only: */ background-color:orange;
      float:none; /* Remove the float that was necessary for IE. */
    }
    /* Select the first three DIVs: */
    div.parent div:nth-child(-n+3){
      /* Demo only: */ background-color:pink;
      clear:left;
      float:left;
    }
</style>

<div class="parent">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

Taxonomy Super Select Version of the Styles:

.taxonomy-super-select-checkboxes {
  display:inline;
  padding-top:0;
}
.taxonomy-super-select-checkboxes legend {
  font-weight:bold;
}
.taxonomy-super-select-checkboxes .description {
  margin-bottom:10px;
}
.taxonomy-super-select-checkboxes .form-item {
  overflow:hidden;
  float:left; /* Keep this for IE and older browsers. They will see two columns, but with horizontal alphabetization. */
  width:48%;
  margin:0;
}
  /* The following will be understood by all current browsers EXCEPT for Internet Explorer. */
  /* Select all .form-item elements from the 19th child on: */
  .taxonomy-super-select-checkboxes .form-item:nth-child(n+19){
    float:none; /* Remove the float that was necessary for IE. */
  }
  /* Select the first 18 .form-item elements: */
  .taxonomy-super-select-checkboxes .form-item:nth-child(-n+18){
    clear:left;
    float:left;
  }
.taxonomy-super-select-checkboxes + .form-item {
  clear:left;
}