Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 862
  • Last Modified:

Making DIVs float and auto-size and wrap

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.

I'd prefer an elegant CSS-only solution, but I don't think I'm going to get one. If there's another trick you think I could use to achieve the same goal, then please let me know. Oh, javascript's OK to use and I'm using ASP classic on the back end.
=================================================
|               |               |***************|
|               |               |*    DIV3     *|
|               |               |***************|
=================================================
|               |*******        |               |
|               |*     *        |               |
|               |* D   *        |               |
=================* I   *=========================
|               |* V   ******** |               |
|               |* 1   **     * |               |
|               |*     **  D  * |               |
=================*     **  I  *==================
|               |********  V  * |               |
|               |       *  2  * |               |
|               |       *     * |               |
========================*******==================

Open in new window

0
Sanx69
Asked:
Sanx69
1 Solution
 
qwerty021600Commented:
Seems u want this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#div1
{height: 20px; width: 100px; background-color: #CCCCCC; padding-top: 0px;}
#div2
{height: 100px; width: 20px; background-color: #ff0000; position: absolute; display: block; z-index: 450; }
#div3
{height: 100px; width: 20px; background-color: #000000; position: absolute; display: block; z-index: 250; margin-top: 20px; margin-left: 20px; }
</style>
</head>

<body>
<table width="350" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td width="108">&nbsp;</td>
    <td width="80">&nbsp;</td>
    <td width="154">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td><div id="div1">Any text</div></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><div id="div2"></div><div id="div3"></div></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>
0
 
Sanx69Author Commented:
Thanks Qwerty.

What I was really hoping for is something that would have automatically resized set the left offset of the DIVs just using CSS. Whilst this is a CSS-only situation, one still has to set the widths and left-offset manually for each one.

As it happens, I ended up completely thinking the way I went about it. I have a database query to tell me how many DIVs overlap in the same column. That allows me to set the width and left offset programmatically on a per DIV basis. Instead of doing it via stylesheets, I'm actually creating the DIVs on the client side with parameters passed to the javascript routines using ASP. I'm also not actually creating the DIVs within the table at all, but rather (using Prototype to discover the locations of individual cells in the table) placing them manually using absolute positioning.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now