CODEWITHSUNDEEP
htmlcsswidthpercentage
Arthur
Arthur

Reputation: 5148

What does 100% really do? (multiple-case study)

I'm currently building a fully responsive website, and the more I try to understand, the more I don't. Principally with percentages.

I know a % is based on the first positioned parent. But, I have made some example on JSFiddle, and I had different results:

Fiddle

In all examples we have the same base:

HTML:

<div class="example">  
  <div class="container">  
    <div class="item"></div>
  </div>   
</div>

CSS Properties of divs :

  1. The .example block has position: relative. It has a width: 60% (of his parent: body).
  2. The .container block has position: static. It has a width: 80% (this time of .example because it's a relative block).

My Problem:

When I want to move the .item block instead of .example size, but for each CSS attribute I'm using (margin-left, left, transform, etc.), 100% results in a different size. Furthermore, if I change the positioning for .item (static, relative, etc.) the size is different again.

Can someone explain why 100% on .item are different for margin, left, or transform ?

Upvotes: 1

Views: 108

Answers (1)

DaniP
DaniP

Reputation: 38252

Just to clarify for you take in care that % percentage is not the same computed value for all properties:

With your example the default position is this:

enter image description here

  • In position using left 

    Percentages of the width of the containing block

    In this case since you are using absolute position the referent parent is the closest with a non static position defined. "example" container who is defined relative.

    enter image description here

  • In margin

    Percentages refer to the width of the containing block

    In case one without absolute position is fine moving the element to the left exact the size of the container div from his initial position.

    enter image description here

    When you add absolute now is the 100% of example after the space of his initial position.

    enter image description here

  • In transform

    Percentages refer to the size of bounding box

    So the element is offset by an amount equal to his width.

    enter image description here

Upvotes: 6

Related Questions