Take the 2-minute tour ×

I'm trying to accomplish the following layout,

and I'm almost there, except for the last green div, which is going lower and lower depending on the content of the content (white) div. If I set a value for the TOP property for the green div, and then I add some more text to the content div, the green div goes lower and lower.

Since the green div is child to the main container div, and the green div is relatively positioned, isn't it supposed to be placed specifically at the position indicated by the TOP value of it? If I'm incorrect...can someone please tell me how can i make it so that the green div is always displayed at the same spot within the container (gray) div, regardless of the height of the content/white div?

I tried to paste the css code here but was having problems with the brower. you can see the test site source/css at http://www.rae-mx.com/test

tia for the help.

share|improve this question
add comment

2 Answers

up vote 0 down vote accepted

I think you're misunderstanding how relative positioning works. If something is marked as position: relative then that does nothing to that element's positioning. However any descendant elements with position: absolute are positioning relative to that element.

So a basic skeleton for what you want is:

#main { position: relative; }
#menu { position: absolute; top: 10; right: 10; }
#content { position: absolute; top: 30; }
#contact { position: absolute; top: 180; right: 10; }

Take a look at Absolute and Relative Positioning. This is called relative+absolute positioning.

share|improve this answer
thanks cletus, i'm about to try what you suggested...just curious: if the main container is set to relative, and the green div i want positioned as absolute, will the contact div not be affected by the content or height of the divs placed above (first in the html markup)? –  GR7 Apr 2 '10 at 0:31
cletus, i just tested your suggestions and still i have the same problem. i define the top-left values so that the contact div is placed where i want it, but if i add any more text to the content div, the contact div is pushed lower than it's supposed to be. is there a way to avoid this and have the contact div position not be affected by the upper div content? –  GR7 Apr 2 '10 at 0:41
nevermind. i was using top-left instead of using bottom-right. relative+absolute and bottom-right for the child div worked. thanks cletus –  GR7 Apr 2 '10 at 0:55
add comment

If you want something positioned at the same place, use position:absolute instead. Position: relative is used to move the element after it have been placed in the normal flow.

And remember: With position:absolute 0,0 is the upper left corner of the first(closest to the element, when walking from the element and to the root) parent with position:relative or position:absolute

share|improve this answer
thanks Martin. Since cletus included a link to a useful article and a sample markup for my problem, i marked his answer as the right one. –  GR7 Apr 2 '10 at 0:56
add comment

Your Answer


