Fluid Widths with Percentages
Use percentage-based widths to create layouts that scale with their container.
Why Fluid Widths?
Fixed-width layouts (in pixels) break on screens narrower than the fixed size. Fluid widths using percentages make layouts scale proportionally to any container or viewport size.
Percentage Width Basics
A percentage width is relative to the parent container's width. A child with width: 50% will always be half its parent's width.
.half-width {
width: 50%;
}
.third-width {
width: 33.333%;
}All lessons in this course
- Mobile-First vs Desktop-First Approach
- Fluid Widths with Percentages
- Min-Width and Max-Width Patterns
- Responsive Images and the Picture Element