Given that what you want to display really *is* a table, I would take the simple approach and just *use* a <table>.
If each row in the <table> represented, say, half an hour, then when you create a <td> for an event, you just use <td rowspan="x"> where "x" is the number of half hour segments it needs to occupy.
When placing an appointment, you just create the <td> without concern as to whether or not there is already a <td> for that starting <tr>.
You do, however, keep track of the maximum number of <td>s that are contained, ether directly or via rowspan, in any given row.
Then you go back through the <table> and add blank <td>s as needed.
But, you know, this would be *MUCH* better done in server-side code. Presumably, the appointments are in a database table, no? So a correctly structured SQL query would give you the data in ready-to-use fashion and then the PHP/ASP/JSP code to generate the table (or <div>s, if you still want to go that route) is nearly painless.
The secret will be in building the DB correctly and in writing a clever SQL query.
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.