Absolute positioning of a Div inside a Div

I have my Div's with a margin: 0px auto; to compensate for wider monitors. Problem is, I want to position another div inside one of these divs but when I do absolute positioning, it keeps doing it from the upper left of the browser. How do I get it to position from the the upper left corner of the Div it is inside?

Here is my code inside my css stylesheet:


#header {
width: 800px;
height: 70px;
margin:0px auto;
text-align:left;
background-color:#fff;
}


#insideheader {
position: absolute;
top: 20px;
left: 720px;
width: 175px;
height: 30px;
text-align:left;
background-color:#fff;
}


And here is my code from the html:



<div id="header">
<img src="Graphics/Smaller title.png">
<div id="insideheader">
<table align = "center">
<tr>
<td><font size="2" font color="gray">Terms Of Use</font></td>
<td></td>
<td class="leftedge2"></td>
<td><font size="2" font color="gray">Contact Us</font></td>
</tr>
</table>
</div>
</div>


What am I doing wrong? Or what should I be doing differently?

Thanks!! :o

set position: relative; on the outer div and position: absolute on the inner div. The top and left styles on the inner div will then be relative to the top left hand corner of the outer div.

Thanks a bunch! Worked like a charm.

you're welcome :)