(CSS) Centering Div in Div

[msimmons]

OK, I have a calendar of 20x20px divs that are one color and I need a 16x16px div inside of those that may or may not be a different color to give the appearance of a 2px outline (i cant use the border-color because I am already using that for a inset effect.). I can get the 16 div on the 20 div fine by putting them both in a div and setting the 16 div position:absolute (but no top or left) but it is sucked up to the corner or the container div. I tried specifying top:2 left:2 but that thought i meant of the screen and not the container div. Any ideas?
Thanks in advance,
Michael

[punkpie_uk]

You need to apply position:relative; for it be 'contained' in the parent DIV. Try using padding:2px; for the parent div for the child to be 'moved' into the center.

[msimmons]

That worked, it was a combonation of relative and that i didnt have the 'inner' div inside the div (not enought coffee yet i guess) but now I have a 2nd problem. I occasionaly have an X image that I float over the divs and now it float over the outer div but under the inner div....

<div id="container" style="text-align:center;">
  <div style="position:absolute;" class="X" id="R1_DayX2"></div>
  <div class="outercheckbox" id="R1_Day2" style="background:#66cc00;">
    <div class="innercheckbox" id="R1_Day2" style="background:#ff0000;"></div>
  </div>
</div>

the 1st div is the container that I was using for the X div (which is the 2nd, on squares that I need the x i add the image to it.
i have the position set to absolute in that div.
thanks in advance,
micahel

[punkpie_uk]

It is floats over some and under others it looks like you need to set the z-index. try setting the style to z-index:1;

[msimmons]

that did the trick, I didnt try that cos I was thinking that by default it was set to auto and since i had it defined first it would be on top...or should it have been defined last? either way works now
Thanks
michael