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>


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.


Version 0.5: module, test page.