A fluid layout lets a page expand and contract with the screen instead of locking its pieces to fixed pixel widths. It is also called a liquid layout. Think of it like a stretchy tablecloth: the shape stays useful as the table changes size. section 13.5 section 13.0
Convert a fixed layout in three friendly steps:
- Choose a maximum width for the outer container. This keeps large-screen text from stretching into uncomfortable, extra-long lines. section 13.5
- Replace fixed widths with percentages. A child set to 75% occupies three quarters of its parent, not three quarters of the viewport. section 13.5
- Check smaller screens. Flexible columns may fit without horizontal scrolling but become too narrow to read comfortably. section 13.7
body {
max-width: 960px;
}
A maximum width gives the layout room to shrink while preventing it from becoming excessively wide on large screens. section 13.5
element percentage = (element fixed width / parent fixed width) * 100
Convert each fixed child width by dividing it by its fixed parent width and multiplying by 100. section 13.5
A quick conversion
If a child was 750 pixels wide inside a 1,000-pixel parent, use width: 75%. When the parent shrinks to 800 pixels, the child becomes 600 pixels wide automatically. Try converting a small page in the Playground, then inspect it on a tablet and smartphone-sized screen. section 13.5 section 13.7
