CODEWITHSUNDEEP
htmlcss
gkarya42
gkarya42

Reputation: 429

difference between percentage width for relative and fixed

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.

Upvotes: 4

Views: 320

Answers (6)

abhishekkannojia
abhishekkannojia

Reputation: 2856

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;
}

Upvotes: 3

justinw
justinw

Reputation: 3966

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).

Upvotes: 1

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

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>

Upvotes: 1

Dasrath
Dasrath

Reputation: 374

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;
    }

Upvotes: 2

Ivin Raj
Ivin Raj

Reputation: 3429

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

Upvotes: 0

Rahul
Rahul

Reputation: 5834

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

Upvotes: 3

Related Questions