Registering a div under absolutely positioned divs

formasfunction · 18th September 07, 05:37 PM

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?

Code:

<!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>

simonpeterong · 19th September 07, 12:50 AM

let me get this, you want the "bugger" to act like your footer?

remove the postition tag on the style on all divs, that will mess the float command and that's the reason why the "bugger" div is behind all the 3 divs (main left and right)

also, place the "bugger" div inside the <body></body>

also, to save on loading speed and clean looking html structure, make a stylesheet for that

post if there's still something going wrong and we'll figure it out.

19th September 07, 12:50 AM	#2
simonpeterong WLC Lover Join Date: Sep 2007 Location: Philippines Posts: 323	Re: Registering a div under absolutely positioned divs let me get this, you want the "bugger" to act like your footer? remove the postition tag on the style on all divs, that will mess the float command and that's the reason why the "bugger" div is behind all the 3 divs (main left and right) also, place the "bugger" div inside the <body></body> also, to save on loading speed and clean looking html structure, make a stylesheet for that post if there's still something going wrong and we'll figure it out.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode