CSS: positioning image in lower right corner, scrollbar trouble.

jollekox · Apr 7, 2005

Hi,

it seems like most browsers won't keep a picture set with an id selector to the lower right corner of the screen (absolute positioning, bottom and right is set to 0px) in place if the page has a scrollbar. When I scroll, the picture "sticks" where it was placed on load.

Is there a way to escape this problem? (I have thought of using a javascript to update the picture's position as the window scrolls, but I don't know if it works.)

The CSS code I am using:
#image {
position: absolute;
bottom: 0px;
right: 0px;
z-index: 1;
}

And in my HTML file:
<div id="image"><img src="image.jpg"></div>

Best Regards,
Jolle Kox

BillyRayPreachersSon · Apr 7, 2005

This will ensure that the image is always aligned with the bottom of the CONTENT, no matter how big or small, or whether there are scrollbars or not.

It will NOT always align with the bottom of the browser window (if the content is less than the height of the window), however... apologies if this is what you are after.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta http-equiv="content-language" content="en" />

	<style type="text/css">
		body {
			position: relative;
		}
		#image {
			position: absolute;
			bottom: 0px;
			right: 0px;
			z-index: 1;
		}
	</style>
</head>

<body>
	<div id="image"><img src="image.jpg"></div>
	Another line<br /> Another line<br /> Another line<br />
	Another line<br /> Another line<br /> Another line<br />
	Another line<br /> Another line<br /> Another line<br />
	Another line<br /> Another line<br /> Another line<br />
	Another line<br /> Another line<br /> Another line<br />
	Another line<br /> Another line<br /> Another line<br />
	Another line<br /> Another line<br /> Another line<br />
	Another line<br /> Another line<br /> Another line<br />
	Another line<br /> Another line<br /> Another line<br />
	Another line<br /> Another line<br /> Another line<br />
	Another line<br /> Another line<br /> Another line<br />
	Another line<br /> Another line<br /> Another line<br />
	Another line<br /> Another line<br /> Another line<br />
</body>
</html>

Tested working in IE 6, FF 1, NN 7, and Opera 7.

Hope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

Nightblade · Apr 19, 2005

Have you attempted


<div style="position: absolute; width: 0px; height: 0px; z-index: X; right: 0; bottom: 0" id="Image">
<img src="image.jpg"></div>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

CSS: positioning image in lower right corner, scrollbar trouble.

jollekox

Programmer

BillyRayPreachersSon

Programmer

Nightblade

Programmer

Similar threads

Part and Inventory Search

Sponsor