CSS PX to Percentage

I hate to break it to you, but you're likely to have a few people rolling their eyes at you here.

A percentage is relative to whatever the parent container's size is. 50% means "half of the width of the parent". There is no "px-%" conversion, because one is a fixed value and the other is a flexible ratio. That's... kinda why you can't find any such thing.


Problem: To get child element in percent,

  1. A) Child width: eg. 760px
  2. B) Parent width : eg. 1024px

You can get parent or child width easily with JQuery. eg: $('#parent').width()

Then apply this Mathematical operation to get the percentage value of child element:
(A / B) * 100

Substituting :
(760/1024) * 100 = 74.22% .. hence solved.


Instead of converting from pixel to percentage try to get the dimension of your element in percentage example

var width = $('#someElt').width();
var parentWidth = $('#someElt').offsetParent().width();
var percent = 100*width/parentWidth;