CSS PX to Percentage

GeordieDave1980 picture GeordieDave1980 · Mar 20, 2014 · Viewed 24.4k times · Source

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!

Answer

Niet the Dark Absol picture Niet the Dark Absol · Mar 20, 2014

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.