1. Home
  2. Forums Index
  3. Browser Side / CSS 4:49 am May 2, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Floating Divs - Works In IE/FF/Etc But - Scrolling Interaction?

         

talondesigns

3:15 pm on May 6, 2008 (gmt 0)

10+ Year Member



I have managed to create a type of "river" flow through a selection of divs.. My final goal is to have the divs "rest" at the top of the scrolling area. When the user scrolls, I am trying to get the text to flow up (or down) the area, while the divs stay in place, forcing the text to continue to wrap around them.

Please note that IE does not hide the extra divs outside of the scrolling area. Ignore that, I know how to take care of that. But I wanted to leave the extra divs in there so you can get a better idea of what I am trying to come up with.

I'm not very fluent with JavaScript, but the CSS part is completed (I think).

Any tips as to how I may achieve this look?

Any help would be GREATLY appreciated.

Begin Code:

<style>

#div1, #div2, #div3, #div4, #div5, #div6, #div7, #div8, #div9,#div11, #div12, #div13, #div14, #div15, #div16, #div17, #div18, #div19{font-size:10px; font-family:Verdana, Arial, Helvetica, sans-serif;}

#div1, #div2, #div3, #div4, #div5, #div6, #div7, #div8, #div9,#div11, #div12, #div13, #div14, #div15, #div16, #div17, #div18, #div19{height:12px;}

#div1, #div2, #div3, #div4, #div5, #div6, #div7, #div8, #div9{position:relative; float:left; clear:left; background-color:#FF0000;}

#div1, #div9{width:10px;}
#div2, #div8{width:30px;}
#div3, #div7{width:50px;}
#div4, #div6{width:70px;}
#div5{width:90px;}

#div11, #div12, #div13, #div14, #div15, #div16, #div17, #div18, #div19{position:relative; float:right; clear:right; right:0px; background-color:#00FF00;}

#div11, #div19{width:90px;}
#div12, #div18{width:70px;}
#div13, #div17{width:50px;}
#div14, #div16{width:30px;}
#div15{width:10px;}

#content{width:50%px; height:180px; font-size:10px; font-family:Verdana, Arial, Helvetica, sans-serif; text-align:justify;}

</style>
<body>
<div id="content" style="overflow:auto">
<div id="div1"></div>
<div id="div11"></div>
<div id="div2"></div>
<div id="div12"></div>
<div id="div3"></div>
<div id="div13"></div>
<div id="div4"></div>
<div id="div14"></div>
<div id="div5"></div>
<div id="div15"></div>
<div id="div6"></div>
<div id="div16"></div>
<div id="div7"></div>
<div id="div17"></div>
<div id="div8"></div>
<div id="div18"></div>
<div id="div9"></div>
<div id="div19"></div>
<div id="div1"></div>
<div id="div11"></div>
<div id="div2"></div>
<div id="div12"></div>
<div id="div3"></div>
<div id="div13"></div>
<div id="div4"></div>
<div id="div14"></div>
<div id="div5"></div>
<div id="div15"></div>
<div id="div6"></div>
<div id="div16"></div>
<div id="div7"></div>
<div id="div17"></div>
<div id="div8"></div>
<div id="div18"></div>
<div id="div9"></div>
<div id="div19"></div>
<div id="div1"></div>
<div id="div11"></div>
<div id="div2"></div>
<div id="div12"></div>
<div id="div3"></div>
<div id="div13"></div>
<div id="div4"></div>
<div id="div14"></div>
<div id="div5"></div>
<div id="div15"></div>
<div id="div6"></div>
<div id="div16"></div>
<div id="div7"></div>
<div id="div17"></div>
<div id="div8"></div>
<div id="div18"></div>
<div id="div9"></div>
<div id="div19"></div>

blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah.
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah.
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah.
<br /><br />~Je Suis Finis~

</div>
</body>

swa66

2:39 am on May 7, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Aside of being a bit stunned at the complexity.

I'm slowly getting convinced this might benefit more from a single table and rendering the look of that table with some CSS. The jungle of divs up there feels to me like something not making sense in the html at all. With the table at least there's logic in where what block sits, and that would be somewhat obvious to somebody reading the code.

Not that as an exercise in CSS it's a bad thing, but I'd avoid using things pushed this far in real life.

I did spot a "width:50%px" that's not going to validate afaik.

talondesigns

4:40 pm on May 7, 2008 (gmt 0)

10+ Year Member



I understand the code is a little "funky" to say the least.. But the updated version will give you a better idea (almost working) of what is trying to be accomplished.

(including the little mishap typo of the "%px")

At any rate... If you have firefox, check this out.

<removed>

It definately is BUGGY in IE, and has its issues with Opera as well. It performs a bit slow in Firefox and even slower in Safari, but it works. We are still working on performance issues, but we may just drop the idea even though it is pretty slick.

Its strictly an exercise (as you say) in CSS, and if we can get the performace to "tune up" a bit, we may keep working on it. Otherwise, it may just fall to the wayside like many other things.

Anyway - See if the link above gives you any more insight into what we are trying to accomplish.

Thank you for your input though. I just want to make sure you understand what it is that we are trying to accomplish.

[edited by: jatar_k at 5:16 pm (utc) on May 7, 2008]
[edit reason] no urls thanks [/edit]

Xapti

5:05 pm on May 7, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I had to use IE(6) to see what your intention was of that code. It does not display whatsoever on FF1.5 for whatever reason.

talondesigns

5:12 pm on May 7, 2008 (gmt 0)

10+ Year Member



I didnt think of mentioning that I am using FF 2.0.0.14

Sorry about that.

Edit to include code from "Removed URL"



<!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=iso-8859-1" />
<title>Untitled Document</title>
<script>
var divs = new Array();
var content;
window.onload=function(){
content=document.getElementById("content");
var count = 0;
AddEvent(content, "scroll", divScroll);
var tags = content.childNodes;
if (tags){
for (var x = 0; x < tags.length; x++){
if (tags[x].className && tags[x].className.indexOf("div") >= 0){
divs[count] = tags[x];
count++;
}
}
}
divScroll(content);
};

function divScroll(e){
document.getElementById("debug").innerHTML += content.scrollTop + "," + parseInt(Math.floor(content.scrollTop / 12)) + "<br>";
var count = 0;
for (var x = Math.floor(content.scrollTop / 12); x < Math.floor((content.scrollTop + 264) / 6); x++){
count++;
var offset = divs[x].offsetTop - content.scrollTop;
if (divs[x].className == "divl"){
if (offset >= 264 && offset < 276) divs[x].style.width = "10px";
if ((offset >= 0 && offset < 12) ¦¦ (offset >= 252 && offset < 264)) divs[x].style.width = "21px";
if ((offset >= 12 && offset < 24) ¦¦ (offset >= 240 && offset < 252)) divs[x].style.width = "31px";
if ((offset >= 24 && offset < 36) ¦¦ (offset >= 228 && offset < 240)) divs[x].style.width = "37px";
if ((offset >= 36 && offset < 48) ¦¦ (offset >= 216 && offset < 228)) divs[x].style.width = "41px";
if ((offset >= 48 && offset < 60) ¦¦ (offset >= 204 && offset < 216)) divs[x].style.width = "45px";
if ((offset >= 60 && offset < 72) ¦¦ (offset >= 192 && offset < 204)) divs[x].style.width = "48px";
if ((offset >= 72 && offset < 84) ¦¦ (offset >= 180 && offset < 192)) divs[x].style.width = "50px";
if ((offset >= 84 && offset < 96) ¦¦ (offset >= 168 && offset < 180)) divs[x].style.width = "52px";
if ((offset >= 96 && offset < 108) ¦¦ (offset >= 156 && offset < 168)) divs[x].style.width = "53px";
if ((offset >= 108 && offset < 120) ¦¦ (offset >= 144 && offset < 156)) divs[x].style.width = "54px";
if ((offset >= 120 && offset < 132) ¦¦ (offset >= 132 && offset < 144)) divs[x].style.width = "54px";
} else if (divs[x].className == "divr") {
if (offset >= 264 && offset < 276) divs[x].style.width = "46px";
if ((offset >= 0 && offset < 12) ¦¦ (offset >= 252 && offset < 264)) divs[x].style.width = "35px";
if ((offset >= 12 && offset < 24) ¦¦ (offset >= 240 && offset < 252)) divs[x].style.width = "25px";
if ((offset >= 24 && offset < 36) ¦¦ (offset >= 228 && offset < 240)) divs[x].style.width = "19px";
if ((offset >= 36 && offset < 48) ¦¦ (offset >= 216 && offset < 228)) divs[x].style.width = "15px";
if ((offset >= 48 && offset < 60) ¦¦ (offset >= 204 && offset < 216)) divs[x].style.width = "11px";
if ((offset >= 60 && offset < 72) ¦¦ (offset >= 192 && offset < 204)) divs[x].style.width = "8px";
if ((offset >= 72 && offset < 84) ¦¦ (offset >= 180 && offset < 192)) divs[x].style.width = "6px";
if ((offset >= 84 && offset < 96) ¦¦ (offset >= 168 && offset < 180)) divs[x].style.width = "4px";
if ((offset >= 96 && offset < 108) ¦¦ (offset >= 156 && offset < 168)) divs[x].style.width = "3px";
if ((offset >= 108 && offset < 120) ¦¦ (offset >= 144 && offset < 156)) divs[x].style.width = "2px";
if ((offset >= 120 && offset < 132) ¦¦ (offset >= 132 && offset < 144)) divs[x].style.width = "2px";

}
}
document.getElementById("debug").innerHTML += count + "<br>";
};

function AddEvent(eventObj, eventName, targetFunction) {
if (eventObj.attachEvent)
eventObj.attachEvent("on" + eventName, targetFunction);
else
eventObj.addEventListener(eventName, targetFunction, false);
};
</script>
</head>
<style>

.divl, divr{font-size:1px; font-family:Verdana, Arial, Helvetica, sans-serif;}

.divl,.divr{height:12px;}

.divl{position:relative; float:left; clear:left;}

.divr{position:relative; float:right; clear:right; right:0px;}

#content{width:100%; height:264px; font-size:10px; font-family:Verdana, Arial, Helvetica, sans-serif; text-align:justify;}

</style>
<body>
<div style="width:100%; height:264px; overflow:hidden;">
<div id="content" style="overflow:auto">
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
<div class="divl"></div>
<div class="divr"></div>
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah.
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah.
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah. <br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah.
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah.
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah. <br />
~Je Suis Finis~ </div>
</div>
<div id="debug" style="position:absolute; right:0px; width:200px; height:50px; background-color:#00FFFF;"></div>
</body>
</html>


 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 4:49 am May 2, 2026