Scrolling DIV

Hello,

I need a square div area that needs to scroll with the user when the user scrolls down so that the div area is always at the same position of the screen (bottom left) no matter where the user is.
Can this be accomplished using CSS only or does it require some javascript ??

If so, could you perhaps enlighten me on how to accomplish this?
Thanks !!

 

Hi,

This is certaintly possible with CSS, via the use of fixed positioning. This enables the DIV to be fixed on the browser window regardless of whether the user is scrolling or not. Just add position:fixed; to the DIV to ensure it stays stuck, and then give it top: right: bottom: and left: attributes to position it where you want on the screen.

For example:

#myFixedDIV{
position:fixed;
bottom:0;
left:0;
width:200px;
height:200px;
background:grey;
}

Code (markup):

Creates a 200px square DIV fixed on the bottom left of the screen.

However as per usual I don't think this works in IE6 due to poor support ! I wouldn't worry about this though, although i'm sure there are fixes out there e.g see the link but I think they come with their own problems.

 

Maybe you need a z-index to have your fixed div above other content.

 

Is this what you are looking for? http://viladi.co.il/dp/bottom_box.html

Tested in FF, Chrome, Safari, Opera, IE7 & IE8.
Will not work on IE6.