The clearfix issue is great to get your divs to behave properly. The one drawback is that you must insert a class=”clearfix” to every element that needs the clearfix attribute applied. This is not forward thinking since if a new method comes along then all of the markup needs to be updated to accommodate the method. This is one extra step that is not necessary and could be fixed in a simpler way.

Agile Ajax has a solution from the Orbitz website that simply applied the the class/div elements to the clearfix declarations.

So instead of the classic clearfix (which is updated to remove IE5 Mac support).

    /* float clearing for IE6 */
    * html .clearfix{
      height: 1%;
      overflow: visible;
    }

    /* float clearing for IE7 */
    *+html .clearfix{
      min-height: 1%;
    }

    /* float clearing for everyone else */
    .clearfix:after{
      clear: both;
      content: ".";
      display: block;
      height: 0;
      visibility: hidden;
    }

You now simply add classes/div elements to the clearfix declarations.

/* 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;
}

This is one of those “Why didn’t I think of that” moments.

Agile Ajax: Developer’s Notebook: Forward-thinking CSS float-clearing

Position is everything

September 22nd, 2007
Categories: css, floats . Author: marcello

No Comments

No comments yet.

Comments RSS TrackBack Identifier URI

Leave a comment

You must be logged in to post a comment.