Fluid layout
A fluid layout is a web layout whose dimensions adapt continuously to changes in available viewport space.
CSS in Depth, Second Edition
A fluid layout is a web layout whose dimensions adapt continuously to the available viewport size rather than relying on fixed dimensions.
- How it is used
- Supports responsive design by keeping page containers and columns adaptable across viewport widths.
- How deep it goes
- Explains definitions, fixed-layout contrasts, percentage sizing, default browser behavior, flexbox constraints, and image overflow prevention.
- Examples
- Uses one-, two-, or three-column pages, percentage-based main and sidebar columns, and responsive srcset images.
- What you can do after
- Build it from scratch by sizing containers fluidly, allowing columns to shrink, and preventing images from overflowing.
Read how CSS in Depth, Second Edition explains fluid layout →
Math for Web Design
A fluid layout is a web layout whose dimensions and spacing adjust continuously as the available viewport size changes.
- How it is used
- Uses proportional widths and spacing to keep layouts adaptable across changing screen sizes.
- How deep it goes
- Explains the three-stage conversion from fixed dimensions through percentage calculations to responsive CSS implementation.
- Examples
- Demonstrates fixed and liquid article-aside layouts using 960px containers, percentage columns, padding, and parent-child width calculations.
- What you can do after
- Build it from scratch by choosing a maximum width, converting child dimensions to percentages, and scaling related spacing.
Web Design Playground
A responsive page layout approach in which horizontal dimensions are expressed with relative units so content expands or contracts with the viewport.
- How it is used
- Builds responsive page layouts that resize across screens without requiring horizontal scrolling.
- How deep it goes
- Explains maximum widths, parent-based percentages, conversion calculations, and the narrow-column limitation before responsive refinements.
- Examples
- Uses a 960-pixel maximum container, a 75-percent child calculation, device-size comparisons, and a Playground conversion exercise.
- What you can do after
- Build it from scratch by replacing fixed widths with parent-relative percentages and applying a sensible maximum width.
Related concepts
- proportionuses · 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.
- fixed-width layoutcontrasts with · A fixed-width layout is a presentation layout whose primary dimensions remain fixed rather than adapting automatically to the available display or viewport width.
- responsive web designused by · Responsive web design is an approach to designing websites whose layouts and presentation adapt to different screen sizes, viewports, and device characteristics.
- fraction unituses · The CSS fr unit represents a share of the free space remaining in a grid container after non-flexible track sizes and other deductions are accounted for.
- CSS math functionuses · A CSS math function is a built-in CSS function that evaluates mathematical values or expressions in style declarations.
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.