Oncemade

When positioniseverything.net posted an article about clearfix technique, it didn't take much for web developers and designers to start adopting it. Lately, Dan Cederholm has been talking about renaming the class clearfix to group, which semantically speaking makes a lot more sense. So, let's go ahead and rename the class.

New Easy-Clearing
.group:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

Using conditional comments, let's add the proper code to handle IE 6 and IE 7 (IE8 supports the :after pseudo-elements; no extra code is necessary).

New Easy-Clearing for IE
/* IE6 */
* html .group { height: 1%; }

/*IE7 */
.group { min-height: 1px; }

I've been using the group class on my latest projects and I'd like to share a small tip, when clearing list items, with you.

Normally, we'd have the group class on every LI, like so:

Clearing List Items the Old Way
<ul class="comments">
  <li class="group">
    <img src="carla.jpg" alt="Carla&#x27;s Picture" />
    <p>Tiny and I miss you</p>
  </li>
  <li class="group">
    <img src="steven.jpg" alt="Steven&#x27;s Picture" />
    <p>I need a favor! It will take you 5 seconds.</p>
  </li>
  <li class="group">
    <img src="buzz.jpg" alt="Buzz&#x27;s Picture" />
    <p>I speak gibberish</p>
  </li>
</ul>

Although the markup doesn't look very bad, we can make things better by introducing a new class (groupList) and adding it to the UL.

Clearing List Items the New Way
<ul class="comments groupList">
  <li>
    <img src="carla.jpg" alt="Carla&#x27;s Picture" />
    <p>Tiny and I miss you</p>
  </li>
  <li>
    <img src="steven.jpg" alt="Steven&#x27;s Picture" />
    <p>I need a favor! It will take you 5 seconds.</p>
  </li>
  <li>
    <img src="buzz.jpg" alt="Buzz&#x27;s Picture" />
    <p>I speak gibberish</p>
  </li>
</ul>

Phew, the markup looks much cleaner! Now that we've fixed it, let's add the .groupList > li selector to the existing .group styles.

Extending .group
.groupList > li,
.group:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

Wait! How about the beloved IE?

Extending .group IE
/* IE6 */
* html .groupList li,
* html .group { height: 1%; }
* html .groupList li li { height: auto; } /* Resets nested LIs */

/*IE7 */
.group > li,
.group { min-height: 1px; }

Browser Support

• Firefox
• Safari
• Chrome
• Opera
• Internet Explore 7 & 8
• Internet Explore 6