% is not working sometime in position CSS

Question

I am applying position(in %) to some div but it is not working. Here is the code.

#transitions {
  position: absolute;
  top: 0;
  bottom: 70%;
  display: block;
}

But when i apply:

  #transitions {
    position: absolute;
    top: 0;
    bottom: 70em;
    display: block;
  }

it is working for me.

Is there any diffrence b/w % or em ?

Please help.

Possible duplicate of : http://stackoverflow.com/questions/132685/font-size-in-css-or-em — Keval Domadia, Mar 14 '13 at 10:56
However, you can still have a look at : http://kyleschaeffer.com/user-experience/css-font-size-em-vs-px-vs-pt-vs/ — Keval Domadia, Mar 14 '13 at 10:57

Daniel Imms · Answer 1 · 2013-03-14T11:10:55.720

There is plenty of difference between em and %.

% represents the percentage size of the element's container. In the following example, the <div> will be 70% of the width of the page.

<body>
    <div>A div</div>
</body>

CSS

div { width: 70%; }

em represents the size of a capital 'M' based on the current font-size. With the following CSS instead, the <div> will be the size of 70 'M' characters.

div { width: 70em; }

Your example will position the #transitions element's left hand-side at 70% of the way through it's container. OR 70 'M' characters away from the left hand side of it's container.

score 0 · Answer 2 · answered Mar 14 '13 at 12:43

0

If you want to calculate % vs em then it is likely to be this 170% = 32px = 2 em in font sizes like this you could calculate it 1 em = 16px and 100px = 531.25 %

answered Mar 14 '13 at 12:43

Bhojendra Rauniyar

83,432
35
168
231

% is not working sometime in position CSS

2 Answers2