Edge positioning
When using absolute positioning in CSS2, one can set the horizontal
positioning of an element using the properties left
and width
, or one can position relative to the
right-hand side of the containing block by specifying values for
right
and width
.
It should be possible to position an element by setting its
left
and right
properties but leaving its width
property
as auto
. The same goes for vertical positioning
using top
and bottom
with auto-height
. This "edge-positioning"
technique opens up a number of interesting possibilities for
designing CSS layouts.
The problem is that it doesn’t work properly on Internet Explorer for Windows. Unless you use this script.
Using position.js
This script makes these CSS properties work transparently in IE version
5.0 upwards. It silently does nothing on other browsers. Just insert a
link to the module somewhere in your HTML page - usually in
<head>
. For example:
<script type="text/javascript" src="position.js"></script>
Caveats
Remember IE’s implementation of element height isn’t
quite the same as the spec and the other browsers when
overflow
is set to visible
(the default setting). If the content overflows the element, IE will make
the element bigger to fit. If you don’t want this, use a different
setting of overflow
.