Designing with percentages

I am trying to do responsive layouts “the first time” but find percents not intuitive. I know what 50px looks like, but how do you know the percent if a div is relative to its parent, which is relative to its…parent,etc. It wastes more time than if I do pixels first. I need more math! Is there a good technique for estimating percents?

If the parent container is say 400px wide, then a 50% div relative to that will equate to 200px.

With using % for layout I suggest doing things by eye, if it looks right. Don’t worry if say a 50px margin isn’t exact!

Not much of an answer, but here `tis.

Comments at the top of the page.

<!doctype html>
<html lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>percent widths</title>
Sep 25,2015 7:23 AM

1. The majority of percentage width problems that we see around here involve people using percent width inappropriately, such as to applying {width:100%} to a div (a block object) that by default uses the full available width, or or forgetting that padding and borders add to the percent width unless box-sizing:border-box has been applied.
2. Designing a responsive page is at least a two step process.  Breakpoints are added where variable widths alone do not alter the layout enough to adapth to a smaller/larger width.
3. Nested containers, especially those with percent widths that shrink automatically, are really not a problem because they quickly become self-limiting... impractical... the road to realizing this is quite short.
4. Custom designs necessarily involve more trial-and-error steps than "machine generated" layouts or grids.
5. You sound impatient.  Good luck doing most anything perfectly "the first time".
    <style type="text/css">

.inner {
    padding:50px 0;
    margin:0 auto;
    outline:1px solid red;

<div class="outer">
    <div class="midder">
        <div class="inner">


Hey man, thank you so much for this comment! I appreciate it. I guess I can’t get away from having to tweak styles.You’re correct…I am impatient coz I want to get as much done in as little time as possible.

The comments are at the top of a “working page” demonstrating nested divs with percent widths. Copy the whole thing to a file with an .html or .html suffix, double-click it to open it in your browser and change the width of the browser window to see the results. For more fun, add more nests

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.