CSS Academy · Lesson

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 — 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, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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%;
}

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.

.col-half {
  box-sizing: border-box;
  width: 50%;
  padding: 16px; /* does not break 50% width */
}

Fluid Two-Column Layout

A simple float-based (legacy) fluid layout:

.col {
  float: left;
  width: 50%;
  padding: 16px;
  box-sizing: border-box;
}

Fluid Flexbox Columns

Using Flexbox for fluid column layouts is cleaner:

.flex-row {
  display: flex;
  gap: 24px;
}

.col-main { flex: 2; } /* 2/3 of space */
.col-side { flex: 1; } /* 1/3 of space */

Percentage Padding

Percentage padding is always relative to the parent's width (not height) — even for top/bottom padding. This allows aspect-ratio tricks:

.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
}
/* Note: Use aspect-ratio property in modern CSS instead */

Modern Aspect Ratio

The aspect-ratio property replaces the padding trick for maintaining aspect ratios:

.video-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
}

max-width with Fluid Layout

Combining percentage widths with max-width prevents lines from becoming too wide on large screens:

.article {
  width: 90%;      /* fluid but not 100% */
  max-width: 800px; /* never too wide */
  margin: 0 auto;  /* centered */
}

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 content
max-content: size that fits all content in one line
fit-content: between min and max-content

.tag {
  width: fit-content;
  padding: 4px 8px;
}

Fluid Grid Pattern

A common fluid grid using inline-block (legacy) or modern CSS:

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2%;
}

.grid > * {
  flex: 1 1 calc(33% - 2%);
  min-width: 200px;
}

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.

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, and the CSS Academy course includes 4 lessons in total. 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.

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; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

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

← Back to CSS Academy