Peg a div to bottom right of page - HOW?

[XgrinderX]

Hey everyone.

I am trying to peg a div to the bottom right corner of my web page. I want it to either always be at the bottom right corner of the page OR I want it to always stay in the bottom right corner of the window....I don't care which. I cannot make it do either it seems (except in IE6 where it will stay at the bottom right corner of the page).

Here's the test page:

http://www.moyl.com/test/test_peg_bot_right.asp

and the CSS in question looks like this:

#contact_viewer
{
	position: absolute;
	bottom: 25px;
	right: 25px;
	width: 300px;
	height: 330px;
	background-color: White;
	border: solid 1px black;
	z-index: 50;
}

Here is how to see what I am talking about:
Go to the page I linked above (use IE7 or Firefox)
Scroll to the very bottom and click Contact Us
Now scroll all the way back to the top

What happens is the div is "stuck" at the absolute WINDOW location as it was when the page first rendered instead of pegged to the bottom right as desired. As stated earlier, I don't care if it stays at the very bottom of the page even when scrolled (like in IE6) OR it can just stick to the bottom right of the window and kind of "float" there even when scrolled. Either way would be acceptable. What am I doing wrong?

-Greg

 

[BabyJeffy]

Investigate position:fixed (IE7 and Fx etc will work fine with this, I think).

Something like:

#myNode {
  position: fixed;
  bottom: 0px;
  right: 0px;
}

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[XgrinderX]

Ok I figured it out.

I needed to move the contact_viewer div to be inside the page_content_container div. That way the contact_viewer would be positioned within its parent div. The way I had it before the contact_viewer div was positioned inside the body tag which caused it to be positioned against against its parent container - the window - and not the page itself.

Hopefully my tomfoolery will help someone else reading this post.