div layer

[Tabo]

I have a website with a structure like this:


The box in the picture is a centre aligned table. On the top right there is a link which either shows or hides the div layer, shown in red. The problem I have is that I want the div layer always under the link, no matter the page/screen width, I've tried a number of things that has not worked well, any ideas? I may also need js for this but Ill check out css first.

[Veronica]

Put the link and the text area in their own divs, each with an equal margin-left. Then put both of these divs in another div within the td of your table.

<div>

<div id="link" style="margin-left:100px;"><a href="#" onclick="showHide('reveal'); return false;">Show/Hide Div</a></div>

<div id="reveal"  style="margin-left:100px; display: none;">Text that is hidden until the above link is clicked.</div>

</div>

By setting the margin-left the same in each div, they'll stay one under the other regardless of resolution. The onclick in the above example would be whatever script you're actually using yourself.

[Tabo]

that doesnt seem to work, im using a layered div (though i think you know)
<div style="position: absolute; width: 100px; height: 100px; z-index: 1" id="layer1">
&nbsp;</div>