correct way to align a nested div?

Question

Hi ..

Can anyone tell me the best way to position a nested div over the current div.. basically got 2 divs ... outer and inner.. the inner needs to be 20 pixels in and 20 pixels down form the current..

I have

 <div>
      <div>

      </div>
 </div>

I tried setting the inner div to relative and top 20px and left 20px and it seemed to work in IE7 but not in FF or IE8

Answer 1

Set the outer one to position: relative and the inner to position: absolute, then set top and left as needed. It will use the outer div as its bounds rather than the page. If you need to set it over, make sure your z-index is correctly set on both divs as well.

If the inner div is empty, make sure you define a width/height otherwise it will not appear on the page.

Answer 2

Typically, one would either set margin: 20px on the inner <div> or padding: 20px on the outer, depending on the exact effect you're looking for.

Edit: On second thought, there are simply too many ways to accomplish a number of very similar effects which match your description. Perhaps you could make your question a little more specific? :-)

Answer 3

Set the outer div's positioning context to 'relative' and then you can move any inner content around w/ position: absolute. Using your markup, the CSS would be:

div { position: relative; }
div div { position: absolute; top: 20px; left: 20px; }

Answer 4

div1 {
  padding-left: 20px;
  padding-top: 20px;
}

div2 {
  margin: 0px;
}

Where div1 is the outter div and div2 is the inner div. That should do it. I think this approach is safer than messing with absolute and relative positionings and such...

Answer 5

Option 1:

inner-div { margin-top: 20px; margin-left: 20px; }

Option 2:

outer-div { padding-top: 20px; padding-left: 20px; }

The above examples are a bit verbose. If you want, you can use the shorthand:

margin: top right bottom left;