Absolute positioning of a Div inside a Div

[eaglei22]

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!!

[bullant]

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.

[eaglei22]

Thanks a bunch! Worked like a charm.

[bullant]

you're welcome