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

Let's start of by adding the necessary markup to render the appropriate date format. Create a DIV element with a class of "entryDate" and three children SPANs with respective classes "postMoth", "postDay", and "postYear".
Add the PHP code to get the post date from the database as shown bellow. For more PHP date format go to http://us.php.net/date

Markup
<div class="entryDate">
   <span class="postMonth"><?php the_time('M') ?></span>
   <span class="postDay"><?php the_time('d') ?></span>
   <span class="postYear"><?php the_time('Y') ?></span>
</div>

Now let's add styles to make it look pretty.

First of all, set the body font-size to 10px or 62.5%. Then go ahead and set the DIV that wraps the post entry to position: relative so the date badge can be positioned relatively to it. Set margin-left to the width of the date badge plus the gap between the post entry. In this sample the margin-left is set to 4.8em.

Absolute position the entryDate and set the left to the same size as the its parent margin-left. After that, set the width to 3.5em. Next, set all the SPANs inside entryDate as block element (The reason why SPANs are being used instead of DIVs is because if the stylesheet is disabled, the date renders nicely in one line). Don't forget to centered align the text.

Change the appearance as needed, I have changed the size of the text to look more like a calendar and I've set its color to blue and white.

CSS
body { font-size: 62.5%; }
.post { 
    position: relative;
    margin-left: 4.8em;
}
.entryDate { 
    border: 1px solid #999; 
    font-family: Georgia,"Times New Roman", serif; 
    left: -4.8em; 
    line-height: 1; 
    position: absolute; 
    top: 0; 
    width: 3.5em;
}
.entryDate span { 
    display: block; 
    text-align: center; 
}
.postMonth { 
    text-transform: uppercase; 
    font-size: 1.2em;
    padding-top: 0.3em; 
}
.postDay { font-size: 2em; }
.postYear { 
    background-color: #2358B8; 
    color: #FFF; 
    font-size: 1.2em; 
    padding: 0.3em 0; 
    margin-top: 0.3em;
}

Don't forget to checkout the live demo

Browser Support

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