How do I keep text in a <div> from taking space?

[Penciled]

Probably a simple thing for most of you...
I'm making a menu - I want additional info to appear whenever a user mouses over an item. I've created the following and it works... with 1 problem.
The hidden text is hidden, but still takes up space - so I have big empty spots between menu items. Is there a way to move the hidden info out of the normal flow so my menu items are stacked as though there was nothing inbetween?

Also, I guess I should mention that I don't want the 'info' text to change my table layout - When I tried this with Absolute positioning it worked... until I resized my browser... then the text didn't line up with the menu item. With absolute positioning there are spaces between menu items and the <td> is widened.

<a href="blah.html" onMouseOver="show(info1)" onMouseLeave="hide(info1)">Blah</a><br />
<div id="info1" style="style="position:relative; left:100; top:-20; z-index:1; visibility:hidden;">
<table class="info" > 
<tr> 
<td>Blah is your friend.</td> 
</tr> 
</table> 
</div>

<a href="foo.html" onMouseOver="show(info2)" onMouseLeave="hide(info2)">Foo</a><br />
<div id="info2" style="style="position:relative; left:100; top:-20; z-index:1; visibility:hidden;">
<table class="info" > 
<tr> 
<td>Foo is your friends friend.</td> 
</tr> 
</table> 
</div>

etc...

[edited by: Penciled at 3:42 pm (utc) on May 27, 2009]

[raheelajk]

<div id="info2" style="style="position:relative; left:100; top:-20; z-index:1; visibility:hidden;">

"visibility" property of a <div> does take space while keeping itself hidden.

You need to use "display" property of <div> which will not occupy any space.

so your code should be like:

<div id="info2" style="style="position:relative; left:100; top:-20; z-index:1; display:none;">

and when you want to show it use JS like this:

document.getElementById("info2").style.display="inline";

Hope this helps.

[Penciled]

Thanks -

I had tried that before... and the spacing disappeared - until the info appeared - then it split my menu again.... and stretched my table.

Any other ideas?

[edited by: Penciled at 3:54 pm (utc) on May 27, 2009]

[Penciled]

Thanks for your reply -

I did manage to make it work after searching quite a while for an answer...

In case others are wondering - here's what I did...

<div id="1" style="position:absolute"> will place the element an absolute distance from the upper left corner of the window, however if you do this...

<div id="2" style="position:relative"><div id="3" style="position:absolute"> Element 3 will be placed an absolute distance from the upper left corner of element 2 (not the window).

So - in a table that has relative position you can do something like this to position the inner <div>'s absolutely:

<table><tr><td>
<div style="position:relative">
<a href="" onMouseOver="show()" onMouseLeave="hide()">something</a><div style="position:absolute; left:130; top:-5; z-index:1; visibility:hidden;">blah blah blah</div>
<a href="" onMouseOver="show()" onMouseLeave="hide()">something else</a><div style="position:absolute; left:130; top:15; z-index:1; visibility:hidden;">blah blah blah</div>
<a href="" onMouseOver="show()" onMouseLeave="hide()">something more</a><div style="position:absolute; left:130; top:35; z-index:1; visibility:hidden;">blah blah blah</div>
</div>
</td></tr></table>

[edited by: Penciled at 6:19 pm (utc) on May 27, 2009]