Designing with percentages

HTML & CSS
1

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?

2

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!

3

Not much of an answer, but here `tis.

Comments at the top of the page.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>percent widths</title>
<!--
http://www.sitepoint.com/community/t/designing-with-percentages/203029
jackweb
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">

.outer,
.midder,
.inner {
    width:70%;
    padding:50px 0;
    margin:0 auto;
    outline:1px solid red;
}
    </style>
</head>
<body>

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

</body>
</html>
4

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.

5

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

6

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