Centering two lines of text next to one line, HTML/CSS - html

Question

So I've made what I'm looking to achieve in jsfiddle. I'm wondering if there is an easier way to achieve this same effect:
<div class="date">
<span class="day">05</span>
<div class="dateHolder">
<span class="month">DEC</span>
<span class="year">2013</span>
</div>
.date {
position: absolute;
font-family: Arial;
font-weight: bold;
background: rgba(0, 0, 0, 0.8);
color: #fff;
width: 110px;
height: 60px;
padding: 10px;
}
.dateHolder {
margin-top: 10px;
}
.day {
font-size: 50px;
line-height: 60px;
float: left;
}
.month, .year {
float: right;
font-size: 20px;
line-height: 20px;
display: block;
}

Answer 1

I suppose that the simplest way to lay out these parts of the date and center them vertically is to use CSS table model:
.date {
font-family: Arial;
font-weight: bold;
position:absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
color: #fff;
width: 110px;
height: 60px;
padding: 10px;
display: table;
}
.dateHolder {
display: table-cell;
vertical-align: middle;
text-align: right;
font-size: 20px;
line-height: 21px;
}
.day {
font-size: 50px;
line-height: 60px;
display: table-cell;
vertical-align: middle;
}
.dateHolder > span {
display: block;
}
No need in clearfix magic and margin/padding adjustment. Everything is aligned automatically.

Answer 2

I don't think that you need those month and year spans. It is enough to float their container. There is also clearfix missing. Here is the jsfiddle updated http://jsfiddle.net/krasimir/2gwwB/3/
That's the simplest markup and css which I can come up with.
<div class="date">
<span class="day">05</span>
<div class="dateHolder">
DEC<br />2013
</div>
</div>
The CSS:
.date {
font-family: Arial;
font-weight: bold;
position:absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
color: #fff;
width: 110px;
height: 60px;
padding: 10px;
}
.date:after {
content: "";
clear: both;
display: block;
}
.dateHolder {
margin: 7px 0 0 10px;
float: left;
}
.day {
display: block;
font-size: 50px;
float: left;
}

Answer 3

Here is another minimalist example, display:inline-block is the key.
HTML:
<div class="date">
<span class="day">28</span>
<span class="month-year">APR<br />2022</span>
</div>
CSS:
.month-year {
display: inline-block;
font-size: 1.5em;
}
.day {
font-size: 4em;
}
See: http://jsfiddle.net/unb76dw9/13/