A fluid layout replaces rigid pixel widths with relationships that respond continuously to available space. It avoids horizontal scrolling on narrow screens and sudden breakpoint-driven jumps, while a max-width prevents comfortable reading areas from becoming too wide. section 6.3.4 section 6.5.1
Convert a fixed layout to a percentage-based fluid layout in three practical steps:
- Set a maximum width on the outer container, such as max-width: 960px, so larger screens do not produce excessively long text lines. section 6.3.4
- Convert each narrower child width with element percentage = (element fixed width / parent fixed width) * 100. section 6.3.4
- Apply the same percentage-based reasoning to related spacing, including margins and padding; horizontal and vertical percentages are relative to the parent width. section 6.7
From fixed columns to fluid columns
A 640px article beside a 320px aside inside a 960px layout becomes approximately 66.67% and 33.33%. As the parent changes from 1,000px to 800px, a 75% child changes from 750px to 600px automatically. CSS can express the result with body { max-width: 960px; }, article { width: 66.67%; }, and aside { width: 33.33%; }.
