Popular Conversions
In a 1200 px container: 300px = 25%, 400px = 33.333%, 600px = 50% and 900px = 75%. In a 1140 px container (Bootstrap's widest default), 285 px = 25%.
Convert pixels to a percentage of the parent element. % = px ÷ parent size × 100, so 300 px in a 1200 px container is 25%.
In a 1200 px container: 300px = 25%, 400px = 33.333%, 600px = 50% and 900px = 75%. In a 1140 px container (Bootstrap's widest default), 285 px = 25%.
Percentages for common pixel widths inside four common container widths.
| Pixels (px) | of 960px | of 1140px | of 1200px | of 1440px |
|---|---|---|---|---|
| 10px | 1.042% | 0.877% | 0.833% | 0.694% |
| 20px | 2.083% | 1.754% | 1.667% | 1.389% |
| 24px | 2.5% | 2.105% | 2% | 1.667% |
| 30px | 3.125% | 2.632% | 2.5% | 2.083% |
| 40px | 4.167% | 3.509% | 3.333% | 2.778% |
| 48px | 5% | 4.211% | 4% | 3.333% |
| 50px | 5.208% | 4.386% | 4.167% | 3.472% |
| 60px | 6.25% | 5.263% | 5% | 4.167% |
| 80px | 8.333% | 7.018% | 6.667% | 5.556% |
| 100px | 10.417% | 8.772% | 8.333% | 6.944% |
| 120px | 12.5% | 10.526% | 10% | 8.333% |
| 150px | 15.625% | 13.158% | 12.5% | 10.417% |
| 160px | 16.667% | 14.035% | 13.333% | 11.111% |
| 200px | 20.833% | 17.544% | 16.667% | 13.889% |
| 240px | 25% | 21.053% | 20% | 16.667% |
| 250px | 26.042% | 21.93% | 20.833% | 17.361% |
| 300px | 31.25% | 26.316% | 25% | 20.833% |
| 320px | 33.333% | 28.07% | 26.667% | 22.222% |
| 360px | 37.5% | 31.579% | 30% | 25% |
| 400px | 41.667% | 35.088% | 33.333% | 27.778% |
| 480px | 50% | 42.105% | 40% | 33.333% |
| 500px | 52.083% | 43.86% | 41.667% | 34.722% |
| 600px | 62.5% | 52.632% | 50% | 41.667% |
| 720px | 75% | 63.158% | 60% | 50% |
| 800px | 83.333% | 70.175% | 66.667% | 55.556% |
| 900px | 93.75% | 78.947% | 75% | 62.5% |
| 960px | 100% | 84.211% | 80% | 66.667% |
| 1000px | 104.167% | 87.719% | 83.333% | 69.444% |
A design with a 300 px sidebar and 900 px content area in a 1200 px container becomes width: 25% and width: 75%. A 30 px gap becomes 2.5%. Now the layout scales with any screen instead of overflowing on small ones.
Percent of what? Width, padding and margin percentages use the parent's width — even vertical padding. Height percentages only work when the parent has a fixed height. A font-size percentage uses the parent's font size.
% = px ÷ parent size × 100
Example: 240 px inside a 960 px container is 240 ÷ 960 × 100 = 25%.
Divide the pixel value by the size of the parent element and multiply by 100. 300 px in a 1200 px parent is 25%.
600 px is 50% of 1200 px.
Padding and margin percentages are based on the parent element's width, for both horizontal and vertical sides.
A percentage height needs a parent with a defined height. Without one, the browser treats it as auto.
No. All conversions happen entirely in your browser. The values you enter are never sent to our server or saved.