I am creating a weekly agenda. I have a table as the background for the time and the grid, and I have blocks that are set to position: absolute and float: left. My blocks are showing up, but they are overlapping. So lets say I have 5 blocks that are overlapping, I need a way to resize those five blocks so they take up equal space. what makes this even harder is that those five might not all be overlapping each other. For example:
Notice the overlapping in the first image. I need it to be properly spaced if any are overlapping. Not too sure if this makes much sense; I will try to clarify better if this is really confusing. Basically I just need a way to display a bunch of time blocks on a week calendar that will show multiple appoints from different people. As mentioned, just remember, those blocks are position: absolute and float: left because they are positioned by pixel on top of a table. As for the solution, it can be in javascript or HTML, I don’t really care, but keep in mind that I will have to add dragging later on, so I need a way to reorder it on the fly if they drag a box to overlap.
UPDATE
Just as a quick update. In my diagram, that is an example. There’s no guarantee that I will have only 4 boxes in that format with that overlap. I could have 50 boxes all overlapping at different points, so I will probably need an algorithm through javascript.
Also, to answer the question as to why position: absolute, here is a screenshot of my agenda:
notice the grid behind? That’s a table. Each element is placed inside a row and is stretched across multiple rows. If I don’t have position absolute, it will automatically expand that row which would warp the grid.
I think this can be easily done by div and float . Please set the height and width according to you