CSS Date Blocks for Blogs

I've seen a few instances and explanations of these that go to lengths as extensive as generating images on the fly. That's totally overkill for what 3 little DIV tags and a couple of CSS classes can accomplish. You also gain the fact that your date information will actually be present in your HTML.

The CSS:

.dateblock {
text-align: center;
width: 50px;
font-family: Arial;
}
.day {
font-size: 26px;
position: relative;
top: -5px;
}
.month {
font-size: 12px;
}
.year {
font-size: 12px;
position: relative;
top: -10px;
}


Example HTML

<div class="dateblock">
<div class="month">
SEP
</div>
<div class="day">
05
</div>
<div class="year">
2005
</div>
</div>


Extending it
One obvious extension would be to make the dateblock container float:left next to, say, a blog post. The result would be something along the lines of a dropcap for your date. The CSS numbers for pixel alignment, sizes, etc. are tied to the font chosen. If you chose another font (and I will for my own instances) the numbers will change.

Another intriguing option would be to use the sIFR web fonts to get out of the default fonts available on the web. It would take some trial and error to get the sizing right, but then you'd be able to use nearly any font you like.

A border and appropriate padding on the container will look like this (mouseover extended examples to see the combined HTML/CSS):