Creating a calendar control using CSS: How to auto layout events

I'm creating a JavaScript based calendar control, which when showing a single day needs to list any events occuring. I'd like the use the CSS float:left in order to get the browser to automatically layout the events.

I'd like for the events to automatically stack, so that they float to the far left when possible. Then stack as if there is overlap with another event.

However I'm having problems, it currently looks like this:

This is the result I want to achieve:

How can I achieve this effect using float?

Have you tried using the "clear:both;" css style attribute to your block with the green element?

Also, you may find that an already created jQuery plugin like FullCalendar could serve your needs.