How to make a DIV always float on the screen in top right corner?
JavascriptCssJavascript Problem Overview
How do I make a DIV always float on the screen's top right corner, so that even when I scroll the page down, the DIV still shows up in the same fixed location? Thanks.
Javascript Solutions
Solution 1 - Javascript
Use position: fixed, and anchor it to the top and right sides of the page:
#fixed-div {
position: fixed;
top: 1em;
right: 1em;
}
IE6 does not support position: fixed, however. If you need this functionality in IE6, this purely-CSS solution seems to do the trick. You'll need a wrapper <div> to contain some of the styles for it to work, as seen in the stylesheet.
Solution 2 - Javascript
Use position:fixed, as previously stated, IE6 doesn't recognize position:fixed, but with some css magic you can get IE6 to behave:
html, body {
height: 100%;
overflow:auto;
}
body #fixedElement {
position:fixed !important;
position: absolute; /*ie6 */
bottom: 0;
}
The !important flag makes it so you don't have to use a conditional comment for IE. This will have #fixedElement use position:fixed in all browsers but IE, and in IE, position:absolute will take effect with bottom:0. This will simulate position:fixed for IE6