Hi, I think what I'm wanting is going to be virtually impossible to achieve, but I'm going to ask anyway.
I have a table (not used for page layout, before anyone asks) containing a number of cells of a fixed width and height. Any one of these cells can contain one or more DIV elements. By design, the DIV element may be taller than the cell and it should float over the cells underneath. All this is easy enough to achieve in CSS; set the style to "height: whatever; width: whatever; position: absolute; display: block; z-index: 250;"
However, now it gets complicated. Although these DIV elements can float over the table cells beneath them, they cannot be allowed to overlap each other. If the positioning of two or more of these elements causes them to overlap, the second should move over horizontally whilst keeping its vertical position. Oh, and as the DIVs need to be contained within in a column, I also need them to resize sot hat both remain contained within a vertical column.
Clear as mud, I know. I've tried to indicate what I need within the code box below using ACSII art. DIV1 is contained within the second cell of row two. DIV2 is contained within the second cell of row 3. As the height attributes apply to each, they need to horizontally resize so they don't overlap each other, whilst still floating over the table cells beneath. DIV3 is added to the third cell in row 1. As it doesn't interfere with any DIV, it's expanded to take the full width of the cell.
To draw an analogy, if you're familiar with Outlook Web Access or the GMail Calendar, what I'm looking for is something very similar to the way in which overlapping appointments are shown, but without all the AJAX-based drag, drop and resize goodness these solutions entail.
There's one small pinprick of light at the end of the tunnel; I do not need this to be cross-browser compatible. I needs to work with Firefox only.
| | |***************|
| | |* DIV3 *|
| | |***************|
| |******* | |
| |* * | |
| |* D * | |
=================* I *=========================
| |* V ******** | |
| |* 1 ** * | |
| |* ** D * | |
=================* ** I *==================
| |******** V * | |
| | * 2 * | |
| | * * | |