CSS Forum

**silverglade** · 12-03-2008, 08:14 AM

is this the best way to position a div anywhere inside a wrapper div?

here is the css for the div. i put it inside a wrapper div. i wanted it positioned anywhere i want it and was wondering if this is the proper way. any help greatly appreciated. derek.
here is the code.

Code:

#randomrectangle {
  margin-top: 200px;
  margin-left: 200px;
  width: 120px;
  height: 100px;
  background-color: pink;
  }

**silverglade** · 08:42 AM

now im trying to place one div box on top of the other but i it seems like the second box is relating its position to the top box instead of the top corner of the wrapper div. please help. derek. any help appreciated. how would i position the box in relation to the top left corner of the wrapper div? here is the code.

Code:

#randomrectangle {
  margin-top: 200px;
  margin-left: 200px;
  width: 120px;
  height: 100px;
  background-color: pink;
  }
  #underrandom {
  margin-top: 0px;
  margin-left: 200px;
  width: 120px;
  height: 100px;
  background-color: red;
  }

**Insensus** · 12-03-2008, 08:53 AM

Adding a position: absolute; to the CSS for an element will allow you to place the element relative to it's container by specifying top/left/bottom/right in the CSS as well.

Examples to be found here:
http://www.w3schools.com/Css/pr_class_position.asp

**silverglade** · 10:05 AM

thank you, also when i do the following style to my div, in the browser, the div box goes outside of my container div. i dont understand why. any help appreciated. thanks. derek

here is the new code.

Code:

#absolutebox {
  position: absolute;
 
  left: 200px;
  top: 300px;
  width: 100px;
  height: 100px;
  background-color: blue;
  }

the following divs stay inside the div box, but are only positioned relative to the divs above it.

Code:

#randomrectangle {
  margin-top: 200px;
  margin-left: 200px;
  width: 120px;
  height: 100px;
  background-color: pink;
  }
  #underrandom {
  margin-top: 0px;
  margin-left: 200px;
  width: 120px;
  height: 100px;
  background-color: red;
  }

**wayfarer07** · 11:03 AM

What you're seeing in the first example I believe, is margin collapse on the left-side(link to all the code?), which is the correct behavior, but often confusing in situations like this. Adding 1px of padding or a 1px border to the parent will stop it from happening.

As far as absolute positioning goes, the parent must have position: relative, or else the absolutely positioned element will be positioned relative to the nearest ancestor that has relative positioning, until it reaches the <body>.

**silverglade** · 12-03-2008, 03:16 PM

awesome it worked thank you very much. it wouldnt let me give you talkupation though for some reason. sorry. derek but thank you.