how to position these CSS elements without defining height and width - css

Question

I am trying to create a little graphical box for a time element on a website. What I would like to have is something like this:
I have this HTML:
<div class="entry-meta">
<time class="entry-date" datetime="2011-09-16T09:59:48+00:00" pubdate="">
<span class="date-day">16</span>
<span class="date-month">Sep</span>
<span class="date-year">2011</span>
</time>
</div>
And this CSS so far:
.entry-meta {
display: block;
color: white;
float: left;
background: #aaa;
}
.date-day {
display: block;
font-size: 30px;
background: #444;
float: left;
}
.date-month {
display: block;
font-size: 12px;
background: #666;
float: left;
}
.date-year {
display: block;
font-size: 12px;
background: #888;
float:left;
}
My problem is that I cannot achieve two things:
To align the text to the corners of the box and forget about the baseline. I would like to align 16 to the top left corner and cut it's box at the bottom right corner. I am looking for eliminating all the spacing pixels.
To move the year under the month, without specifying exact width and height properties. If I delete float: left then it goes under the day. What I would like to have is to move it right of the day and under the month. Do I need to create an other div or spand for the month + year?
Also, it seems that it doesn't matter if I remove display: block from the span CSS-es why is it?
Here is a jsFiddle I created:
http://jsfiddle.net/ESbqY/3/
An update one based on Kolink's suggestion:
http://jsfiddle.net/ESbqY/5/

Answer 1

Fully customizable:
http://jsfiddle.net/5MMc9/8/
html:
<div class="entry-meta">
<time class="entry-date" datetime="2011-09-16T09:59:48+00:00" pubdate="">
<div class="date-day">16</div>
<div class="container">
<div class="date-month">Sep</div>
<div class="date-year">2011</div>
</div>
</time>
</div>
css:
.entry-meta {position: relative; font-family: Trebuchet MS;}
.container {float: left;}
.date-day {font-size: 70px; line-height: 55px; float: left; background: #fa7d7d;}
.date-month {font-size: 25px; line-height: 25px; background: #627cc6; padding: 0 0 5px 0;}
.date-year {font-size: 25px; line-height: 25px; background: #3ce320;}
Furthermore, you can add display: inline-block; to the month css if you want the div to be same width as text inside.

Answer 2

The following:
<span style="font-size: 2em;">16</span><span style="display: inline-block;">Sep<br />2011</span>
Will produce, more or less exactly, the result shown in the image.

Answer 3

This seems to work as required:
time span {
display: block;
font-size: 1em;
margin-left: 2.5em;
}
time span.date-day {
float: left;
position: absolute;
font-size: 2em;
margin: 0;
}
.entry-meta {
border: 2px solid #ccc;
display: block;
float: left;
position: relative;
}
JS Fiddle demo.
Edited to amend/use the colours from the question, and to remove the (possibly unwanted) margin between the date-day and the other span elements:
time span {
display: block;
font-size: 1em;
margin-left: 2em;
}
time span.date-day {
float: left;
position: absolute;
font-size: 2em;
margin: 0;
background-color: #444;
}
time span.date-month {
background-color: #666;
}
time span.date-year {
background-color: #888;
}
.entry-meta {
border: 2px solid #ccc;
display: block;
float: left;
position: relative;
background-color: #ccc;
}
JS Fiddle demo.