How to Convert Percent to Pixels in CSS: A Step-by-Step

If you’ve spent more than ten minutes styling a webpage, you’ve probably hit the classic CSS wall: trying to figure out exactly how wide a 50% div actually is in pixels.

Sometimes CSS feels like trying to follow a recipe where the measurements are just “some flour” and “a bit of water.” You want exact numbers, but CSS gives you relative proportions.

The good news? Converting percentages to pixels isn’t dark magic. It’s actually just basic arithmetic, and once you understand the one golden rule of CSS percentages, you’ll never have to guess your layout dimensions again.

Let’s break it down step by step.

The Golden Rule: It’s All About the Parent

Before doing any math, we need to talk about how CSS thinks.

Imagine you have a giant, empty picture frame hanging on your wall. That frame is 1000 pixels wide. If you tell a photo to take up 50% of the space, it takes up half the frame (500 pixels).

In CSS, that picture frame is called the parent container. A percentage value in CSS does not exist in a vacuum. It is always, always, always a percentage of its direct parent.

If you don’t know the size of the parent container, you cannot calculate the pixel value of the child. It’s that simple!

The Simple Math Behind the Conversion

Once you know the pixel width (or height) of your parent container, the math is straightforward. Here is the formula:

(Parent Size in Pixels × Percentage) ÷ 100 = Target Pixels

Let’s say your parent <div> is 800px wide, and you want a child <div> to be 75% wide.

• 800 × 75 = 60,000

• 60,000 ÷ 100 = 600px

Your child container will render at exactly 600 pixels wide.

Step-by-Step Example: Putting It into Practice

Let’s look at a real-world scenario. You’re building a classic blog layout: a main content area and a sidebar, sitting side-by-side inside a wrapper.

Here is your HTML:

<div class="wrapper">
  <div class="main-content">This is the article.</div>
  <div class="sidebar">This is the sidebar.</div>
</div>

Here is your CSS:

.wrapper {
  width: 1200px; 
}

.main-content {
  width: 70%;
}

.sidebar {
  width: 30%;
}

Step 1: Identify the Parent

The parent of both the .main-content and the .sidebar is the .wrapper.

Step 2: Find the Parent’s Pixel Value

Looking at our CSS, the .wrapper is hard-coded to 1200px.

Step 3: Do the Math

• Main Content: (1200 × 70) ÷ 100 = 840px

• Sidebar: (1200 × 30) ÷ 100 = 360px

If you inspect those elements in your browser’s developer tools, you’ll see they perfectly equal 840px and 360px.

The “Gotcha” Moments: Padding, Margins, and Box-Sizing

In a perfect world, that math is all you need. But CSS has a sneaky way of messing with our math: the box model.

By default, if you tell a box to be 50% wide, and then add 20px of padding to it, CSS adds that 20px on top of the 50%. Suddenly, your box is wider than you calculated, and your whole layout drops to the next line.

The Fix: Always use box-sizing: border-box;.

* {
  box-sizing: border-box;
}

Think of border-box as telling your browser, “When I say 50%, I mean 50% total, including the padding and the borders. Figure it out.” This keeps your pixel conversions accurate and prevents layout breakage.

Note: Margins are still applied outside the box, so you’ll need to account for them separately!

Your Quick-Reference Cheat Sheet

Don’t want to pull out a calculator every time you write CSS? Here is a cheat sheet for common percentages based on standard parent container widths.

Parent Width	10%	25%	33.33% (One Third)	50%	75%
800px	80px	200px	~266px	400px	600px
1000px	100px	250px	~333px	500px	750px
1200px	120px	300px	400px	600px	900px
1440px	144px	360px	480px	720px	1080px

Converting percentages to pixels is really just an exercise in tracking down your parent container. Once you know how big the “picture frame” is, sizing the contents inside of it becomes a breeze.

And if you ever find yourself needing to do the exact opposite—figuring out the percentage from a hard pixel value—you can save yourself the math entirely and just use a quick Pixel to Percentage Converter.