Relative Positioning in Dynamic HTML

The picture on this page (below) is relatively positioned (STYLE="position:relative;"), with an offset of 150 pixels to the right and 70 pixels down from its 'natural' location. You can see the rectangular 'hole' in the page where it would naturally have been, while the picture itself sits over the text at its offset location.

Try resizing your browser window and see what happens. As you make the window narrower and this paragraph word-wraps, the picture's natural position is reflowed downwards and the picture itself moves with it, always maintaining its offset position. Compare this with the behaviour of the absolutely-positioned picture on the other page.

Last month I abandoned my cross-platform principles and started looking at Microsoft's version of Dynamic HTML, which only works with the Internet Explorer 4.0 browser. The reason was that IE's DHTML is, quite simply, better than NetScape's, particularly for JavaScript programmers looking to add a little client-side trickery to their pages. It's still better this month, so I've carried on looking.

Microsoft's version of DHTML turns every HTML tag in a Web page into a programmable object, which you can access from JavaScript and VBScript routines (Netscape's does something similar, but not as accessible). Until now, tags have been 'static' - the browser processes them as it's loading the page, and after that their details can't be changed. In IE 4, however, the tag can be accessed as an object at any time, allowing you to change its details (now termed 'properties'). This means you can, for example, change the size of the picture created by an <IMG&ldots tag, or the target of an <A HREF&ldots hyperlink. This ability to dynamically alter the properties of HTML tags is the reason it's called Dynamic HTML.