I'm trying to create an events calendar which has a somewhat 'gantt' chart like bar representing the times of an event, along with the time listed.

I've uploaded a page showing the problem

As you can see, the problem is that in the 3rd cell, the event div is being overlapped by the previous event div which goes outside the boundary of the cell. The event from the 2nd cell SHOULD expand beyond the cell border, but what I'm trying to get to happen is that WHEN the event from the 2nd cell expands into the 3rd cell, the event on the 3rd cell starts a new line.

I believe the problem exists because of the nowrap on the time, but I want the time and in some cases the bar to cross the cell boundary when the time goes from one day to another.

All that works now, but I'm having a problem with events overlapping when an event goes from one day to another. I've tried all sorts of :even cells having a different padding, etc. but all these solutions seem to bring up more problems.

Is there a way get the no-wrap to force a new long when it crosses into the next cell? or any other solution to this issue?