<ul class="meta"> <li class="date"> <div class="month"><?php the_time('M'); ?></div> <div class="day"><?php the_time('j'); ?></div> <div class="year"><?php the_time('Y'); ?></div> </li></ul>
div.entry ul.meta { padding:0; margin:0; list-style:none; float:left; width: 100px; height: 90px; font-size:11px; }.month { font-weight: bold; font-size: 24px; margin: 0; padding: 0 10px 0 0; line-height: normal; width: 35px; float: left; clear: both; border-bottom: 1px solid #CCC;}.day { font-weight: bold; font-size: 36px; margin: 0; padding: 0 10px 0 0; line-height: normal; width: 35px; float: left; clear: both;}.year { /* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg); /* IE */ -ms-transform: rotate(-90deg); /* Opera */ -o-transform: rotate(-90deg); /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); float: left; text-align: right; font-size: 24px; margin: 0; padding: 0; border-top: 1px solid #ccc;}
Image
I can't get the year to but up to the top, so it kind of makes a nice neat box.
Here is my code:
And the css
margin: -15px 0 0 0;