Solved

Making DIVs float and auto-size and wrap

Posted on 2009-05-18
2
854 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

Technology Partners: 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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

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…
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

749 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