Absolutely positioned elements within a relatively positioned parent use the parent’s coordinates for calculation of top, right, bottom, and left positioning. Furthermore, by specifying values for all four edges of an absolutely positioned element one can effectively stretch the element.
Of course, Internet Explorer falls apart. It disregards the bottom and left properties when all four edges are specified on an absolutely positioned element. However, using the proprietary expression pseudo-property, one can calculate the correct width of each absoutely positioned child.
For example, below are three columns of width 20%, 60%, and 20%, plus borders and padding. (I’ve added margins also, just to make sure everything flows correctly.) This the secondary column’s top left corner is located at (0,0). Its top right corner is at (20% + left border + left padding + right padding + left border, 0). Where 20% is a percentage of the parent’s available width. Thus, for Internet Explorer we can specify #Secondary’s width dynamically as expression(parentNode.clientWidth * 0.2 - 30 + 'px');, where 0.2 is the 20% desired width less the horizontal borders (10), less the horizontal padding (10), less the horizontal margins (10), in pixels.
Expressions are too tantilizingly appealing to be ultimately usable, right? Some claim that each expression is recalculated every time a “JS execution thread is finished”, such as after a mouseover handler. The MSDN documentation, however, seems to imply that there is some sort of dependency verification to reduce these types of problems.
Tested in: