CSS PX to Percentage

Question

Ok so this question seems to have been asked a fair few times but still haven't managed to get the plain simple answer I'm after from looking at others questions so will ask this my own way. I'm wanting to create a site with a container in CSS as follows:

.container {
     height: 100%;
     margin: 0 auto;
     width: 980px;
}

However for the width I'm wanting to use a percentage but for the life of me I cannot find one simple answer or even a site that converts PX to % or even just to get an answer to what percentage is used in place of 980px or 960px ? Is it 62.5% or 70% ?

Could someone please help me out with this and answer this simple question or at least give me a site that I can look at with conversions and just before anyone answers with PX to EM site, I've already looked at it and it's not clear as that site is more for font sizes.

Thank you to anyone who can answer this!

Solution 1

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.

Solution 2

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.

Solution 3

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;

Comments

[s1w_]

but what is this? nekocalc.com/px-to-percentage-converter i dont understand this converter

[Niet the Dark Absol]

Completely meaningless. By default (which is editable) it assumes that 16px = 100% and gives you ratios accordingly.

[Jean G.T]

good suggestion to do it programatically.