CODEWITHSUNDEEP
htmlcss
nodesto
nodesto

Reputation: 505

How do I manage multiple divs with "position: relative"?

I have an element on my page that i want to position using "position:absolute". Therefore, I have added "position: relative" to #pagewrap. I now want to do the same thing for other elements in the #page, but when I also add "position: relative" to that, all the elements before having #pagewrap as a parent now switches to #page.

The element I am talking about is: #copyright-logo

What do I do to avoid this? 

#pagewrap {
width: 1050px;
margin: 0px auto;
background-color: rgb(255,255,255);
overflow: hidden;
-moz-border-radius: 15px;
border-radius: 15px;
position: relative;
}

#page { 
width: 960px;
margin: 0px auto;
background-color: rgb(255,255,255);
overflow: hidden;
 }

#copyright-logo {
position:absolute; bottom: 10px; right: 10px
}

Upvotes: 2

Views: 7225

Answers (3)

Dzumla
Dzumla

Reputation: 160

You are overusing relative and absolute positionning.

There is absolutely no need to relatively position #pagewrap, simply center it with margins as in:

#pagewrap { width: 1000px; margin: 0 auto; }

In any case, don't overuse those positions but use floats and padding and margin.

Upvotes: 0

Neil
Neil

Reputation: 55402

Absolutely positioned elements are positioned relative to the nearest enclosing positioned element, which may be another absolutely positioned element or alternatively a fixed or a relatively positioned element.

CSS position property

Upvotes: 2

Zoltan Toth
Zoltan Toth

Reputation: 47677

Make your #copyright-logo the direct child of #pagewrap and not #page

<div id="pagewrap">
    <div id="copyright-logo"></div>
    <div id="page"></div>
</div>

Upvotes: 1

Related Questions