difference between percentage width for relative and fixed

Question

i have a page where i have two div elements with different relative and fixed positioning.

<div class="outer1">
</div>
<div class="outer2">
</div>

and css is

 .outer1{
    width:50%;
    height:500px;
    background:red;
    position:relative;
    }

    .outer2{
    width:50%;
    background:blue;
    height:200px;
    position:fixed;
    }

But the problem is that the actual width of both the div elements is different. i have given width as 50% to both element then why there is difference in width.please help.

used css reset or html,body{margin:0; padding:0;} Example check to this demo https://jsfiddle.net/t5qxs4b7/1/ — Rohit Azad Malik, Dec 16 '15 at 05:15

score 3 · Answer 1 · answered Dec 16 '15 at 05:22

When you use Position:fixed the the div takes whole container (i.e. body) as a reference.

A fixed position element is positioned relative to the viewport, or the browser window itself.

In this case width of your screen is taken.Including the Extra default Margin of Body.

And When you set Relative to any Element it means "relative to itself". The element doesn't care about any rules.

That's why You are getting .outer div extra long.Because it is not following the rules of Body tag.

When You use margin:0 then you can see the effect both are same.

JSFIDDLE

abhishekkannojia · Accepted Answer · 2015-12-16T06:05:05.850

Your div .outer1 is taking width: 50% of its parent i.e. body. Whereas you div .outer2 is positioned fixed and therefore is removed form normal document flow and will position itself with respect to viewport.

Since every browser applies default 'user agent' stylesheet which includes default margin, paddings for elements therefore width of your document differs from that of viewport, that's why there is slight difference in the widths.

You can reset default browser styles, to get the desired result.

html, body {
  margin: 0;
  padding: 0;
}

score 2 · Answer 3 · answered Dec 16 '15 at 05:24

use css like this

body{
    margin:0;
    padding:0;
  }
.outer1{
    width:50%;
    height:500px;
    background:red;
    position:relative;
    float:left;
    }
.outer2{
    width:50%;
    background:blue;
    height:200px;
    position:fixed;
    }

score 1 · Answer 4 · answered Dec 16 '15 at 05:24

what-is-a-css-reset

Used css reset or define your html, body margin:0;padding:0;

Demo

html, body
    {
     margin:0; 
      padding:0;
    } 
    .outer1{
        width:50%;
        height:500px;
        background:red;
        position:relative;
        float:left;
        }

        .outer2{
        width:50%;
        background:blue;
        height:200px;
        position:fixed;

        }

<div class="outer1"></div>
<div class="outer2"></div>

score 1 · Answer 5 · edited May 23 '17 at 11:52

As stated by your the comments, this can be resolved by using a css reset or normalize or by simply resetting the body properties yourself.

body {
    margin: 0;
    padding: 0;
}

The reason this happened is because by default most browser have some margin applied to them.

As we know, position: fixed is not within the document flow and therefore is not affected by the margin of the body element.

So, really what you were seeing was actually correct. The element with position: fixed was 50% of the entire viewport, whilst the element with position: relative was 50% of the body element minus it's margin (which resulted in it being less wide).

score 0 · Answer 6 · answered Dec 16 '15 at 05:22

try this one:

    body
    {
     margin:0; 
      padding:0;
    } 
    .outer1{
        width:50%;
        height:500px;
        background:red;
        position:relative;
        float:left;
        }

        .outer2{
        width:50%;
        background:blue;
        height:200px;
        position:fixed;

        }

DEMO HERE

difference between percentage width for relative and fixed

6 Answers6