CSS: Float-clearing, getting containers to honor the height of floated elements inside of them

    /* float clearing for IE6 */
    * html #container,
    * html .classThatNeedsToBeCleared,
    * html div.anotherClassThatNeedsToBeCleared,
    * html #someDiv .someClass .yetAnotherClassThatNeedsToBeCleared{
      height: 1%;
      overflow: visible;
    }
 
    /* float clearing for IE7 */
    *+html #container,
    *+html .classThatNeedsToBeCleared,
    *+html div.anotherClassThatNeedsToBeCleared,
    *+html #someDiv .someClass .yetAnotherClassThatNeedsToBeCleared{
      min-height: 1%;
    }
 
    /* float clearing for everyone else */
    #container:after,
    .classThatNeedsToBeCleared:after,
    div.anotherClassThatNeedsToBeCleared:after,
    #someDiv .someClass .yetAnotherClassThatNeedsToBeCleared:after{
      clear: both;
      content: ".";
      display: block;
      height: 0;
      visibility: hidden;
    }
 
<div id="container">
    < div id="rail" style="float: left;">
    < div id="content" style="float: left;">
</div>