Fluid Widths with Percentages
Use percentage-based widths to create layouts that scale with their container.
Fluid Widths with Percentages is a free CSS Academy lesson on CoddyKit. This is lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, and your progress syncs across the web and the CoddyKit app. The CSS Academy course includes 4 lessons in total.
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.
<div style="width:300px;border:1px dashed #999;padding:4px;">
<div class="half-width" style="background:#4f8cff22;border:1px solid #4f8cff;">width: 50%</div>
<div class="third-width" style="background:#ffb84d22;border:1px solid #ffb84d;">width: 33.333%</div>
</div>Percentage and Box Sizing
With box-sizing: border-box, percentage widths include padding and border. This makes percentage columns easy — 50% is truly half, regardless of padding.
<div style="width:300px;border:1px dashed #999;">
<div class="col-half" style="background:#4f8cff22;border:1px solid #4f8cff;">50% including padding/border</div>
</div>Fluid Two-Column Layout
A simple float-based (legacy) fluid layout:
<div style="width:100%;overflow:auto;">
<div class="col" style="background:#4f8cff22;border:1px solid #4f8cff;">Column A</div>
<div class="col" style="background:#ffb84d22;border:1px solid #ffb84d;">Column B</div>
</div>Fluid Flexbox Columns
Using Flexbox for fluid column layouts is cleaner:
<div class="flex-row">
<div class="col-main" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Main (flex: 2)</div>
<div class="col-side" style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Side (flex: 1)</div>
</div>Percentage Padding
Percentage padding is always relative to the parent's width (not height) — even for top/bottom padding. This allows aspect-ratio tricks:
<div class="video-wrapper" style="background:linear-gradient(135deg,#4f8cff,#7ee787);"></div>Modern Aspect Ratio
The aspect-ratio property replaces the padding trick for maintaining aspect ratios:
<div class="video-wrapper" style="background:linear-gradient(135deg,#4f8cff,#7ee787);"></div>max-width with Fluid Layout
Combining percentage widths with max-width prevents lines from becoming too wide on large screens:
<article class="article" style="background:#4f8cff11;border:1px solid #4f8cff;padding:8px;">Article column — 90% wide, capped at 800px, centered</article>Percentage Height Pitfall
Percentage height requires the parent to have a defined height. If the parent has height: auto, percentage heights on children will compute to auto as well.
Intrinsic Sizing Keywords
Modern CSS adds more fluid sizing options:
min-content: smallest size that fits contentmax-content: size that fits all content in one linefit-content: between min and max-content
<span class="tag" style="background:#4f8cff22;border:1px solid #4f8cff;display:inline-block;">Tag</span>Fluid Grid Pattern
A common fluid grid using inline-block (legacy) or modern CSS:
<div class="grid">
<div style="background:#4f8cff22;border:1px solid #4f8cff;min-height:60px;">A</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;min-height:60px;">B</div>
<div style="background:#7ee78722;border:1px solid #34c759;min-height:60px;">C</div>
</div>Quick Check
A parent is 600px wide. A child has width: 60% and padding: 20px (box-sizing: border-box). What is the child's content width?
Recap
Percentage widths create fluid layouts that scale with their parent container. Combine with max-width to prevent overly wide content. Use aspect-ratio for responsive media. Flexbox and Grid handle fluid columns more elegantly than percentage floats.
Learn CSS with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 40
- Lessons
- 159
Frequently Asked Questions
Is the “Fluid Widths with Percentages” lesson free?
Yes — the full text of “Fluid Widths with Percentages” is free to read here on the web. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO. The CSS Academy course includes 4 lessons in total.
What will I learn in “Fluid Widths with Percentages”?
Use percentage-based widths to create layouts that scale with their container. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start CSS Academy?
No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.
How long does the “Fluid Widths with Percentages” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this CSS Academy lesson?
Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
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