relative position is always very tricky in HTML when you try to apply it in a generic, cross browser environment. For example scrolling in a window, combination with a fixed header which should remain visible is already quite complicated using relative/ absolute positions. Furthermore more not all HTML elements go well with this style of positioning.
For that reason we currently stick to tables. Note that the same layouts can be achieved using tables, although it involves a bit more work. For example two elements in one cell can be achieved by inserting a two-cell table in the table-cell in which you want the two elements.
Furthermore a tip for free ;-), when my form exist of two columns of field-value pairs (so 4 columns effectively), i tend to use a 2-column-1-row table with in both cells a 2 column table with the field-value pairs. In this way the cells of the left column are no longer related to the cells on the right column, which saves a lot of time if you decide to add a field somewhere in the middle, since you do not have to move the fields in the other side of the form to 'remove' the empty row which would have been created otherwise (the left of the second picture).
1 table -- with 3 tables: | a | b | c | d | -- ||a | b |||c | d || | a | b | c | d | -- ||a | b |||c | d || and now adding a row in the middle results in either case in: | a | b | c | d | -- || a | b ||| c | d || | 1 | 2 | | | || 1 | 2 ||| c | d || | a | b | c | d | || a | b ||| | ||
Thanks for your answer Michel. I'm aware of your trick to avoid dependancy of table cells. Basically this is the only way to position elements when you want to build templates with html. So i know the trick but i would prefer using divs. I know it's complicated, but it's really better than using tables. Until there is a beter way we'll stick to using tables.