Negative margins vs relative positioning

html css layout css-position margin
Yarin picture Yarin · Mar 10, 2011 · Viewed 13.1k times · Source

I've come across many layout techniques involving negative margins, such as this classic for sidebar positioning. It seems like these techniques could just as easily be applied with relative positioning.

So instead of this:

.sidebar {
    margin-left:-600px;
}

One would do this:

.sidebar {
    position:relative;
    left:-600px;
}

It seems like relative positioning might even be cleaner in the vertical direction, as top-margin manipulation may be affected by collapsing margin issues, etc.

Is there any advantage to one over the other, or are they practically equivalent?

Thanks-

Answer

anupam picture anupam · Mar 10, 2011

I guess relative positioning will shift the content to left but the original space will be occupied by it unless you make the next element relative too. However with negative margin the content and its original space both are shifted.

Related questions

Position absolute and overflow hidden

We have two DIVs, one embedded in the other. If the outer DIV is not positioned absolute then the inner DIV, which is positioned absolute, does not obey the overflow hidden of the outer DIV (example). Is there any chance …

Read More
CSS - Expand float child DIV height to parent's height

I have the page structure as: <div class="parent"> <div class="child-left floatLeft"> </div> <div class="child-right floatLeft"> </div> </div> Now, the child-left DIV will have more content, …

Read More
What is a clearfix?

Recently I was looking through some website's code, and saw that every <div> had a class clearfix. After a quick Google search, I learned that it is for IE6 sometimes, but what actually is a clearfix? Could you …

Read More