Solved

Making DIVs float and auto-size and wrap

Posted on 2009-05-18
2
848 Views
Last Modified: 2013-12-07
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
Comment
Question by:Sanx69
2 Comments
 
LVL 13

Expert Comment

by:qwerty021600
ID: 24420519
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
 
LVL 3

Accepted Solution

by:
Sanx69 earned 0 total points
ID: 24421201
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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
This article offers some helpful and general tips for safe browsing and online shopping. It offers simple and manageable procedures that help to ensure the safety of one's personal information and the security of any devices.
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now