One failing of CSS with positioning is that it only has left and top
properties, but not bottom or right. This means that you can position an object 50 pixels from the left of the browser window, but you can't position it 50 pixels
from the right or 50 pixels from the bottom of the browser window using just CSS.
This problem should be solved in CSS2, which is the next specification for stylesheets that's being hammered out right now; until that gets implemented in the
major browsers, you'll have to hack your way through it with JavaScript.
The best way around this problem involves calculations with JavaScript based
on the width of the document. Both 4.0 browsers have objects in the DOM that
contain the dimensions of the document. So the way to position these objects
is to calculate the position of the width of the window minus the width of
the object.
<div id="foo">
your content here
</div>
<script>
if (document.layers) {
document.foo.left = window.innerWidth - document.foo.clip.width;
} else if (document.all) {
foo.style.left = document.body.offsetWidth - parseInt(foo.style.width);
}
</script>
This immediately positions the DIV to the right of the screen. The same technique
can be used for positioning objects to the bottom.
The screen objects that the two browsers share are:
Feature
Internet Explorer
Netscape Navigator
height of the screen
screen.height
screen.height
width of the screen
screen.width
screen.width
color depth of the screen
screen.colorDepth
screen.colorDepth
height of the window
document.body.offsetHeight*
window.innerHeight
width of the window
document.body.offsetWidth*
window.innerWidth
*Technically this is the height or width of the document,
not the window, but in most cases these can be made to mean the same
thing.
