How can I reserve space for visibility: hidden elements when they are also position: absolute?

Question

I want to have a region of my page that is reserved for context sensitive help text. It is blank, except when hovering over certain particular elements. But, of course, there are several independent pieces of text from which the visible selection might be chosen. This is in a page flow, with more stuff below it. I tried using a div "positioned", and putting help divs inside that. Each of the help divs is position: absolute; top: 0px; visibility: hidden; with the intention that JS would make one of them visible at a time, yet the space would have been reserved for the biggest piece of text in any of the help divs. Well, as most of you have guessed, because the help divs are position: absolute, their heights don't affect the height of the enclosing div, which ends up at a height of zero.

how can I achieve this? I don't want to use pixel sizing to force a height, because it's almost always wrong on some browser/font combination, and would be a bear to keep tweaking every time the help text were changed, or a new, longer help segment gets added to this.

Did I make sense, or do I need to try to draw pictures?

Answer 1

Yep, you're making sense. As you indicate correctly the containing element is collapsing to zero height since it doesn't contain any flow children with size. There is no simple solution to this without resorting to Javascript as obvious alternatives mean making all of them part of the flow layout, meaning the container would grow to accomodate all of the texts.

Solutions that would work:

1. Apply display:inline-block to all of the help texts to put them next to eachother, put them in a container element that has a width of 10000px or more as required, and encapsulate that element in a container with overflow:hidden. This way the container will actually assume the height of the largest child. Activating a text would then require moving the element in the DOM to the front so it is drawn first, or scrolling to bring it to the right position, which could be complex.
2. After loading the page use Javascript to measure the actual heights of the elements, set the largest one as the height of the container, and then apply display:none to the children instead of visibility:hidden.

The second option is easiest, and would be my preferred choice. It all depends a bit on your specific case though whether there's a better alternative.