Question

I have to work on a software that generates tables (sort of…) and which must provide total control over the position of elements.

So far, we had constructs like this:

<div id="container" style="display: table-row">
  <div id="a" style="position: absolute"></div>
  <div id="b" style="position: absolute"></div>
  <div id="c" style="position: absolute"></div>
</div>

And some javascript code to place the #a, #b and #c elements within #container using left and top style directives.

That way, the elements could even be “inverted”, that is: #b could be the first element on the left and #a the last, depending on some other rule.

However, this fails because those are taken out of the flow and so #container has a null height. Fair enough.

It seems impossible to solve this problem that way, so I thought of using position: relative for the child elements, but doing so, the left and top style directives now refer to the initial element’s position and are no more usable…

Have you ever had to deal with a similar situation ? What can I do to achieve the desired behavior ?

Thank you very much.

P.S : For those who wonder why we don’t use <table> elements to represent a table, lets just say I wonder as well but have no power over that decision…

Answer 1

Two things come to mind – both hacky and probably not super scalable:

1) Add position: absolute not in the CSS but in the JS – but before you do, fix the container to its pre-absolute, offset dimensions, so the height isn’t lost

var container = $('#container');
container.height(container.height()).children().css('position', 'absolute');

2) Go with position: relative, but set their new positions relative to their original positions minus their offset.

var el = $('#some_el');
el.css({top: 0 - el.position().top});