DHTML block positioning

[Shadrack]

I'm sure there is a way to do this...

I have all these values scattered on the page in a table. I'd like the user to be able to change those values while they are looking at the table. Most of the fields will have a set of values, some will only have user input, and others will have both set values or user input. For that reason I don't want to make them all simple SELECT boxes, because of the variety of different input, and also for display reasons.

So I've contructed these little <div> blocks that contain all the html to allow the user to modify each field. The <div> display property is "none;" initially... and there is a little link next to each field in the table that when the user clicks on the display becomes block and the user can then change the value of the field in the table. Basic DHTML and server side scripting stuff. Got that worked out.

Currently I have the <div>'s embedded into the same table cell as the fields. When they appear the browser adjusts the table to make room for this "control" <div>. This gives it a kinda aquard sloppiness that i'd like to fix. I would like it if the <div> hovered over the table when it is visible, as if it were a pop-up drop-down thing like a fancy dhtml menu system. But I'm not sure how to (or if I can) "position it."

The position of the div needs to be relative to the field (obviously), which I know nothing about at render time. On top of that, I've got some fancy javascript sorting going on when the user clicks on one of the headers. This isn't a problem with the control <div> embedded into the cell, because all the content of the cell gets rearanged with the sort funciton. It seems that an absolute positioning strategy won't work.

I hope i've made myself clear. Any help would be awesome!

-nic

[)-(orus]

to make a <div> 'float' above the table, you must set its position to absolute.

If you omit the top and left attributes from the style, the <div> should appear whereever it did in your markup.