Proportion
A proportion is a ratio expressing a part or quantity relative to a whole or reference quantity, commonly represented as a fraction, decimal, or percentage.
Math for Web Design
A proportion is a mathematical relationship expressing the relative sizes of quantities or parts.
- How it is used
- Builds responsive layouts and dynamic UI feedback by expressing sizes and progress relative to a reference value.
- How deep it goes
- Explains property-specific reference values, nested multiplication, box-model effects, liquid-layout conversion, and scroll-progress calculations.
- Examples
- Uses nested 50% containers, a responsive hero image, a fixed-to-liquid article layout, and a reading-progress indicator.
- What you can do after
- Apply it via CSS and JavaScript to calculate responsive dimensions, convert fixed layouts, and drive scroll-based progress displays.
Web Design Playground, Second Edition
A CSS percentage is a relative numeric value resolved against a context-dependent reference dimension.
- How it is used
- Builds liquid, responsive horizontal layouts with percentage widths, padding, and margins.
- How deep it goes
- Explains parent-width resolution with a 75% calculation and warns about percentage spacing, deferring fuller viewport-unit treatment.
- Examples
- Uses a 75%-wide child inside an 800-pixel parent and responsive container padding of 1.67%.
- What you can do after
- Apply it via CSS declarations to create parent-relative horizontal sizing in responsive layouts.
Read how Web Design Playground, Second Edition explains proportion →
Grokking Statistics
The fraction or percentage of a population possessing a specified categorical attribute.
- How it is used
- Measures categorical population attributes and supports confidence intervals and hypothesis tests for proportions.
- How deep it goes
- Defines P and p̂, explains sampling distributions and standard error, and works through confidence intervals without formal derivations.
- Examples
- Uses biking to work, sedentary lifestyles, daily steps, and video-game participation as categorical or percentage examples.
- What you can do after
- Apply proportions via Python and SciPy to calculate sample proportions, sampling probabilities, and confidence intervals.
Everyday Data Visualization
A proportion expressed as a number out of one hundred.
- How it is used
- Uses percentages to normalize comparisons and prevent population size or presentation choices from obscuring the intended insight.
- How deep it goes
- Explains normalization through practical chart examples, while stopping short of mathematical derivations or implementation details.
- Examples
- Uses sales per customer, voter turnout, county vote totals, and currency-versus-percentage reporting.
- What you can do after
- Apply percentages to choose fairer metrics and communicate comparisons without misleading visual emphasis.
Related concepts
- fluid layoutused by · A fluid layout is a web layout whose dimensions adapt continuously to changes in available viewport space.
- containing blockuses · A CSS reference rectangle used to resolve certain descendant properties, including an element's dimensions and position.
- paddingused by · Padding is the addition of extra space, values, or data around or within a structure to satisfy size, alignment, layout, or processing requirements.
- data typeconfigured by · A data type classifies values and specifies their representation or interpretation and the operations applicable to them.
- relative valuekind of · A relative value expresses a quantity in relation to a contextual reference quantity rather than as an absolute value.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.