A percentage-based width looks simple in CSS — width: 50% — until you need to know exactly how many pixels that translates to for a specific layout, like matching a design mockup or debugging why an element looks a certain size.
The Key Detail: Percent Is Relative to the Parent
Unlike vw (relative to the viewport), a percentage width is always relative to its immediate parent element, not the page. width: 50% inside an 800px-wide container renders at 400px. That same rule inside a 300px-wide sidebar renders at 150px. The percentage number never changes, but the resulting pixel value depends entirely on what it's nested inside.
The Conversion Formula
PX = (Percent ÷ 100) × Parent Width
A 25% width inside a 1200px container: (25 ÷ 100) × 1200 = 300px.
Here's how common percentages resolve at a few typical container widths:
| Percent | Parent 360px | Parent 768px | Parent 1024px | Parent 1200px |
|---|---|---|---|---|
| 10% | 36px | 76.8px | 102.4px | 120px |
| 25% | 90px | 192px | 256px | 300px |
| 33.333% | 120px | 256px | 341.33px | 400px |
| 50% | 180px | 384px | 512px | 600px |
| 66.667% | 240px | 512px | 682.67px | 800px |
| 75% | 270px | 576px | 768px | 900px |
| 100% | 360px | 768px | 1024px | 1200px |
Fractional results like 341.33px are normal. Browsers lay out with sub-pixel precision and handle the rounding when they paint, so you don't need to force percentages to produce whole numbers.
Which Width Is "the Parent Width"?
The parent width that percentages use is the parent's content box — its inner width after its own padding and border are removed. This trips people up constantly. Consider:
.wrapper { width: 1000px; padding: 0 40px; box-sizing: border-box; }
.child { width: 50%; }The wrapper is 1000px wide overall, but its content box is 1000 − 80 = 920px. So the child is 50% of 920px = 460px, not 500px. The child's own box-sizing matters too: with the default content-box, any padding and border on the child are added on top of that 460px; with border-box, they're included inside it.
Absolutely positioned elements are different again. Their percentages resolve against the containing block — the nearest positioned ancestor's padding box — rather than the direct parent's content box.
Percentages on Other Properties
Width is the most common case, but not every property uses the same reference:
| Property | Percentage is relative to |
|---|---|
width, max-width, left, right | Containing block's width |
height, top, bottom | Containing block's height (only if it's defined) |
padding and margin (all four sides) | Containing block's width, even top and bottom |
font-size | Parent's font size |
transform: translate() | The element's own size |
The padding rule is why the old "aspect-ratio box" trick works: padding-top: 56.25% creates a 16:9 box because 56.25% of the width is 9/16 of it. Today the aspect-ratio property does this directly; see the Aspect Ratio Calculator if you need to work out a ratio.
Going the Other Direction
If you know the pixel width you want and need the equivalent percentage for a specific parent size: Percent = (PX ÷ Parent Width) × 100. Want a 320px sidebar inside a 1280px layout expressed as a percentage instead of a fixed value? (320 ÷ 1280) × 100 = 25% — now it stays proportional if the parent's width ever changes.
Why Convert At All Instead of Just Using %?
- Matching a fixed-width design mockup. Designers often hand off exact pixel dimensions; converting to a percentage keeps your layout responsive while still matching the intended proportions at the reference size.
- Debugging. When an element looks wrong, knowing its actual rendered pixel width — not just its CSS percentage — makes it much faster to spot the real issue.
- Setting min/max-width alongside a percentage.
width: 50%; max-width: 600px;requires knowing what pixel value actually caps the percentage in a given layout.
Worked Example: Converting a Mockup Into a Fluid Layout
A design mockup shows a 1200px content area with a 780px main column, a 360px sidebar, and a 60px gap. To keep the same proportions at any width, divide each value by the parent width:
- Main: 780 ÷ 1200 × 100 = 65%
- Gap: 60 ÷ 1200 × 100 = 5%
- Sidebar: 360 ÷ 1200 × 100 = 30%
.layout { display: flex; gap: 5%; max-width: 1200px; margin: 0 auto; }
.main { width: 65%; }
.sidebar { width: 30%; min-width: 240px; }The three values add up to exactly 100%, so nothing wraps or overflows. The min-width on the sidebar stops it becoming unusably narrow on a tablet; at that point you'd normally switch to a stacked layout with a media query. In a grid layout, you could express the same split with fr units instead (grid-template-columns: 13fr 6fr) and let the browser subtract the gap for you.
Percent vs vw: Which One to Use?
Both scale with screen size, but they measure different boxes. A percentage follows its container, so a 50% card inside a 400px sidebar is 200px whatever the window size. 50vw is always half the browser window, even inside that sidebar, which usually causes overflow. Use percentages for elements that should fit their container and vw for things that genuinely relate to the whole screen, such as full-bleed sections. More on the viewport in What Is the Viewport in CSS.
Common Mistakes
- Using the page width instead of the parent width. 50% inside a 600px column is 300px, not half of a 1440px screen.
- Forgetting the parent's padding. The reference is the content box, so subtract the parent's horizontal padding before converting.
- Percentages that add up to more than 100%. Three 33.333% columns plus margins or borders will overflow unless you use
box-sizing: border-box, flexgap, or grid. - Expecting
height: 50%to work in a parent with auto height. With no defined parent height, it has nothing to resolve against and behaves likeauto.
Frequently Asked Questions
How do I check the actual pixel width of a percentage element?
Open your browser's developer tools, select the element, and look at the box model in the Computed panel — it shows the resolved width in pixels. In JavaScript, element.getBoundingClientRect().width returns the same value.
Is 100% width the same as 100vw?
No. 100% is the parent's content width; 100vw is the full viewport width, including the vertical scrollbar on most desktop browsers. That's why width: 100vw often creates a small horizontal scrollbar.
Should I round percentages when converting from px?
Keep a few decimal places, for example 33.333% rather than 33%. Rounding too much shifts widths by several pixels on large screens; 33% of 1200px is 396px, four pixels short of a third.
Can I combine a percentage with a fixed pixel value?
Yes, with calc(). width: calc(50% - 20px) takes half the parent's content width and subtracts a fixed 20px, which is useful for two columns separated by a 40px gutter. Functions like min() and max() work the same way: width: min(90%, 720px) stays fluid on small screens but never grows beyond 720px on large ones.
Try it yourself: our Percent to PX and PX to Percent converters do this calculation in both directions instantly — just plug in the parent container's width. For general percentage maths outside CSS, there's also the Percentage Calculator.