Two floated divs inside li a

Two floated divs inside li a

Trying to style a few li's in a calendar but having a bit of bother
creating two columns inside an li.
Notice the orange does not fill up the area and the two spans do not spans
do not align...
http://jsfiddle.net/qN4Tp/3/
<ol>
<li>
<a href="#">
<span class="event-time">12:00pm</span>
<span class="event-name">Retail sales grew at their fastest
pace in seven years during July, according to the latest data
from the British Retail Consortium and KPMG. Sales were up
2.2% year-on-year, driven by…
</span>
</a>
</li>
</ol>