Creating a calendar exhibiting all events in one div requires precise positioning based on the values of top and height. Let me demonstrate this concept.
In the image below, both 6am events are aligned vertically. This alignment issue can be resolved by using float: left(jsfiddle).
If there are no conflicts with the vertical alignment (where the height and top do not overlap), I can mimic this behavior with absolute position(jsfiddle), but not through float.
The Dilemma
The challenge arises while attempting to position the events at 9am and 9:40am precisely as depicted in the image mentioned earlier. Consider the following properties:
9:00height: 50px, top: 200px9:40height: 50px, top: 230px- Bottom of
9:00 event: 200px + 50px = 250px - Top of
9:30 event: 230px - Hence, they share
20px(250px - 230px) vertically.
Therefore, my attempted solution involved the following code snippet:
<div class="container">
<div class="event" style="height: 50px; top: 200px; float:left;">9 AM</div>
<div class="event" style="height: 50px; top: 230px; float:left;">9:40 AM</div>
</div>
...but the float property does not function in elements with absolute position.
Summary
The intention is to utilize the top value as a reference point for vertically placing the event within the calendar corresponding to its respective hour. For instance,
- 6am -> top: 100px
- 7am -> top: 150px
- 8pm -> top: 200px
Approaches
I endeavored to tackle this challenge solely with CSS, yet I am open to integrating JavaScript if necessary. Unfortunately, I cannot illustrate my attempts with JavaScript as I have not achieved substantial results even with CSS manipulation. While I initially opted for the top property assuming it would facilitate easy positioning adjustments, I am willing to explore alternative methods if required. Thank you for your assistance in advance.