Question

I have to develop a tiny schedule overview.
My problem are the events that takes place over midnight.

What I want to do is the following:

On the left side I have a “column” (I work with divs) with the days.
On a second column beside the first one I have my events.

No problem, for events that start and end on the same day.
Events are no text, this are fancy divs with, some add infos and icons, but here I will show them as text.

2012-02-25    Event 1 (8:00-11:00)
              {Some space}
              Event 2 (13:00-15:00)
              {20px space}
--------------------------------------------
2012-02-26    {20px space}
              Event 3 (8:00-11:00)
              {Some space}
              Event 4 (13:00-15:00)

Fine!
But now, for events taken place over midnight, I want to place the event div above the line that divides the two days and centered, so each event div have 30px height and the line is 2px high, that means that I want to have 14px of the overnight event on the startdate and 14px on the enddate.

Each day “row” is also a div. So I want the overnight event placed above the two “row” divs and the line (maybe <hr>, maybe <div>).

Now my question, is this possible and if yes, how?

Best regards

EDIT:

Here a jsFiddle: http://jsfiddle.net/NoiZy/6Dkta/

And now one additional event should be placed above the red line with half size on each day.

Answer 1

I might do something like this http://jsfiddle.net/6Dkta/61/
Set each day row to be ‘position:relative’ then the overlapping event I gave a class so you can add dynamically. The Class twoDay sets the position to absolute and bottom to -34px. This way it will always overlap the bottom no matter the size of the row. Not sure if this works in your setup but it works on the fiddle.