How to stack smaller text in CSS? - css

Question

I have this little bit of text on my page:
I need to place the month (DEC) on top of the year (2013). How can I do this with CSS?
Using BR, or floats, seems to lead to all kinds of crazy formatting problems. Obviously, as the date changes, so does the width, so I can't lock it into a fixed width.
What I have so far:
html
<span class='month'>DEC</span><span class='year'>2013</span>
css
margin-left:20px;
position:relative;
top:-12px;
padding:12px 20px;
font-size:18px;
text-align:right;

Answer 1

Check this one, DEMO http://jsfiddle.net/yeyene/VPZgV/2/
HTML
<div class="day">
<span class="date">31</span>
<div class="mth_yr">
<span class='month'>DEC</span>
<span class='year'>2013</span>
</div>
</div>
CSS
.day{
float:left;
padding:10px;
background:#F0EAE9;
font-family:Georgia, "Times New Roman", Times, serif;
}
.date{
float:left;
padding:8px 10px 2px 10px;
border-right:3px solid #fff;
font-size:30px;
font-weight:bold;
height:50px;
background:#E9A3A0;
color:#fff;
}
.mth_yr{
float:left;
width:35px;
height:50px;
padding:10px 10px 0px 10px;
background:#E9A3A0;
color:#fff;
}