Div positioning and alignment

[Lectrician]

I am developing some code, and have a small problem.

I have a table with a couple cells, the right hand one taking up the right hand side of the screen.

Inside the table cell is a div with a clickable link. When the link is clicked, a div opens below this div. The div is wider that the first. I want the div to open and have the right hand side of the div align with the right hand side of the div above, so it is moved further left into the screen (otherwise it is cut off and you have to scroll to the right).

I can sort of achieve this by moving the div in relation to the relative position, but the amount that needs moving differs on different screen sizes. I had it perfect for my wide screen, but it then overshoots on my normal screen.

How do you go about aligning the right hand sides of a div inside a table cell?

Any pointers would be great.

[bill]

Welcome to WebmasterWorld Lectrician.

Does the <div> you're trying to align have width?

[Lectrician]

I have tried to set the widths, but they didn't seem to want to re-size.

I will post some code. I have set the table border to 1 and coloured the div background to help.

The 'pop up' div is showing nicely aligned on wy widescreen laptop, but then goes off the page on a normal screen.

#######################
my $display = "display:inline";
if ($ENV{'HTTP_USER_AGENT'} =~ /opera/i) {
$display = "display:inline-block";
} elsif ($ENV{'HTTP_USER_AGENT'} =~ /firefox/i) {
$display = "display:inline-block";
}

$showimagetags = qq~
<div style="position:relative;left:-440px;top:1px;$display">
<span id="qlshowimagetags$albumstart" class="QuickLinks" style="width:540px" onmouseover="keepLinks('showimagetags$albumstart')" onmouseout="TimeClose('showimagetags$albumstart')">
<span><a href="javascript:closeLinks('showimagetags$albumstart')" style="position:absolute;right:8px;top:5px;font-weight:bold;">X</a></span><br />
<span class="small" style="padding-left:4px;padding-right:15px;padding-bottom:0px;padding-top:25px;display:block;"><b><i>Forum Code:&nbsp;&nbsp;&nbsp;</i></b><input type="text" readonly value="\[gallery\]$viewuser\/$photofile\[\/gallery\]" style="width:370px;"/>&nbsp;&nbsp;&nbsp;<a href="javascript: void(0)" onclick="window.clipboardData.setData('Text','\[gallery\]$viewuser\/$photofile\[\/gallery\]'); javascript:closeLinks('showimagetags$albumstart')" style="font-size:14px;color:#FF0000;"><b>Copy</b></a></span><br />
<span class="small" style="padding-left:4px;padding-right:15px;padding-bottom:8px;padding-top:0px;display:block;"><b><i>External Code:&nbsp;&nbsp;&nbsp;</i></b><input type="text" readonly value="$galleryurl\/$viewuser\/$photofile" style="width:370px;">&nbsp;&nbsp;&nbsp;<a href="javascript: void(0)" onclick="window.clipboardData.setData('Text','$galleryurl\/$viewuser\/$photofile'); javascript:closeLinks('showimagetags$albumstart')" style="font-size:14px;color:#FF0000;"><b>Copy</b></a></span>
</span>
</div>
<div style="background-color:yellow;position:relative;$display;">
<a href="javascript:quickLinks('showimagetags$albumstart')" title="Click here to view and copy the image link code"><span class="small">Show Image Tags</span>
</div>
~;
######################[/code]

The CSS for the 'QuickLinks' is below, this is part of the CSS sheet for my forum for a drop down links box:

.QuickLinks {
background-color: #DDDDDD;
position: absolute;
visibility: hidden;
margin-top: 15px;
margin-left: 0px;
padding: 0px;
border: 1px;
border-color: #000000;
border-style: solid;
list-style: none;
text-indent: 0px;
}

[edited by: tedster at 4:55 pm (utc) on July 18, 2009]
[edit reason] sorry, no screenshots [/edit]