Registering a div under absolutely positioned divs - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Registering a div under absolutely positioned divs

an odd css question

formasfunction

5:04 pm on Sep 18, 2007 (gmt 0)

10+ Year Member

So I have an odd problem for you guys. In the code below I need to make the div named "bugger" register below (vertically speaking) the div named "main" and all three divs within that. The catch here is that I can't modify the styles applied to any of the divs except for "bugger". As well it's possible that I could also add styles to "body". I realize that "bugger" is outside of the body tags and thats a no no but just trust me when I say thats the way I need for this to work. Also, I only need it to work with Firefox. Is this possible?


<!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" xml:lang="en" lang="en">
<head>
<title>test</title>
</head>
<body>
<div id="main" style="width:950px">
<div id="left" style="width:170px;height:300px;float:left;position:absolute;background-color:grey;"></div>
<div id="middle" style="width:500px;height:300px;float:left;position:absolute;background-color:blue;margin-left:175px;"></div>
<div id="right" style="width:170px;height:300px;float:left;position:absolute;background-color:grey;margin:0px auto 0 680px;"></div>
</div>
</body>
<div id="bugger" style="margin-left:auto; margin-right:auto; clear:both; width: 570px; margin-top:30px; height:30px; background-color:black;"></div>
</html>

agentalpha

7:58 pm on Sep 18, 2007 (gmt 0)

10+ Year Member

A couple ideas I had...

1) Hard code the absolute position the bugger div below the first 3 but I'll assume the size of the first 3 divs is dynamic so that won't work.

2) If you can/want to use javascript, you could use an onload function to get the position and size of the first three divs and then position the bugger div with that info. I can reply again with that code if you need it.

londrum

8:08 pm on Sep 18, 2007 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

you could just include a little javascript.
javascript has got the ability to add, delete and overwrite styles contained in stylesheets.

you don't need to have access to the actual stylesheet in order to change it.

but... of course if anyone has got javascript turned off then it won't work.

formasfunction

2:38 pm on Sep 19, 2007 (gmt 0)

10+ Year Member

Thanks for the suggestions, it sounds like it's going to have to be somewhat of a hack.

AgentAlpha, I'd love to see the javascript necessary to determine the height of the entire page onload. I can't do it based on the three divs or the "main" div because their id's won't always be the same based on the applications I'm looking at.

agentalpha

5:12 pm on Sep 19, 2007 (gmt 0)

10+ Year Member

If you're looking for the height/width of the page as a whole, I think you can use:

document.body.offsetWidth
document.body.offsetHeight

Xapti

11:28 pm on Sep 19, 2007 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Find out how to do it with the div inside the body, with JS or whatever. On a side note - just pointing this out, perhaps you do need it, perhaps you don't:
Do you need to be using xhtml doctype? otherwise use plain html.

Some other things:
You have some elements set to both float:left and position:absolute. This should not be done. If you want them to be floated, and have them be containing blocks, then set position:relative on them, not position:absolute!
Currently, according to current standards, your code will ignore the float, and try to position absolutely. Thing is, you also don't have any coordinates, so it will use auto positioning (so you probably don't notice what it's doing)
[w3.org...]
[w3.org...]

[edited by: Xapti at 11:45 pm (utc) on Sep. 19, 2007]