Solved

Making DIVs float and auto-size and wrap

Posted on 2009-05-18
2
856 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

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.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.
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…
Suggested Courses

623 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