CODEWITHSUNDEEP
csshtml
mark smith
mark smith

Reputation: 20907

correct way to align a nested div?

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

Upvotes: 1

Views: 5533

Answers (5)

cllpse
cllpse

Reputation: 21727

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;

Upvotes: 2

JoeCool
JoeCool

Reputation: 4432

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

Upvotes: 1

noluckmurphy
noluckmurphy

Reputation: 219

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; }

Upvotes: 1

Ben Blank
Ben Blank

Reputation: 56572

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? :-)

Upvotes: 8

Mark Hurd
Mark Hurd

Reputation: 13076

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.

Upvotes: -1

Related Questions