Why Element Sizing Matters

Every element on a webpage occupies space. Understanding how to control that space is fundamental to building layouts that look exactly how you envision them. The width and height properties give you direct control over an element's dimensions, but they behave differently depending on the element type and the box model in use.

Before diving in, make sure you understand the CSS Box Model covered earlier in this course, as width and height interact directly with padding, border, and margin.

The width Property

The width property sets the horizontal size of an element's content area:

CSS

.box {
  width: 300px;
}

Width Values

CSS

/* Fixed pixel width */
.fixed { width: 400px; }

/* Percentage of parent's width */
.relative { width: 50%; }

/* Viewport-based width */
.viewport { width: 80vw; }

/* Content-based width (default for inline, shrink-to-fit) */
.auto { width: auto; }

/* Maximum content width (as wide as the widest content) */
.max { width: max-content; }

/* Minimum content width (as narrow as possible without overflow) */
.min { width: min-content; }

/* Balance between min and max based on available space */
.fit { width: fit-content; }

Understanding auto Width

The auto value behaves differently depending on the element:

Block elements: Expands to fill the parent's available width (minus margins)
Inline elements: Shrinks to fit the content
Absolutely positioned elements: Shrinks to fit content unless both left and right are set

CSS

/* Block element with auto width fills container */
div {
  width: auto; /* Fills parent width */
}

/* Inline element with auto width wraps content */
span {
  width: auto; /* Only as wide as content */
}

The height Property

The height property controls the vertical size of an element:

CSS

.box {
  height: 200px;
}

Height Values

CSS

/* Fixed pixel height */
.fixed { height: 300px; }

/* Percentage of parent's height (parent must have explicit height!) */
.relative { height: 50%; }

/* Viewport-based height */
.viewport { height: 100vh; }

/* Content-based height (default) */
.auto { height: auto; }

The Percentage Height Trap

One of the most common CSS frustrations: percentage heights only work when the parent has an explicit height.

CSS

/* This WON'T work - parent has no explicit height */
.parent {
  /* No height set */
}
.child {
  height: 50%; /* Ignored! Behaves like auto */
}

/* This WILL work - parent has explicit height */
.parent {
  height: 400px;
}
.child {
  height: 50%; /* 200px */
}

/* This also works with viewport units */
.parent {
  height: 100vh;
}
.child {
  height: 50%; /* 50vh */
}

min-width and max-width

These properties set boundaries for how small or large an element can get:

CSS

.responsive-container {
  width: 90%;        /* Preferred width */
  min-width: 320px;  /* Never smaller than this */
  max-width: 1200px; /* Never larger than this */
  margin: 0 auto;    /* Center it */
}

The Classic Responsive Container Pattern

CSS

.container {
  width: 100%;
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

This creates a container that:

Fills smaller screens completely
Caps at 1140px on larger screens
Stays centered with auto margins
Has consistent padding

Fluid Images

CSS

img {
  max-width: 100%;
  height: auto;
}

This ensures images never overflow their container while maintaining their aspect ratio.

min-height and max-height

CSS

.card {
  min-height: 200px;  /* At least this tall */
  /* Content can push it taller */
}

.modal {
  max-height: 80vh;   /* Never taller than 80% of viewport */
  overflow-y: auto;   /* Scroll if content overflows */
}

Full-Height Layouts

CSS

/* Make an element at least full viewport height */
.page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1; /* Grows to fill remaining space */
}

.footer {
  /* Stays at bottom even with little content */
}

box-sizing and How It Affects Sizing

By default, width and height only apply to the content area. Padding and border are added on top, making the total size larger than specified.

CSS

/* Default: content-box */
.box {
  width: 300px;
  padding: 20px;
  border: 5px solid black;
  /* Total width: 300 + 40 + 10 = 350px */
}

/* With border-box: padding and border included */
.box {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 5px solid black;
  /* Total width: 300px exactly */
}

As covered in the Browser Defaults & CSS Reset article, most modern projects use:

CSS

*, *::before, *::after {
  box-sizing: border-box;
}

Intrinsic Sizing Keywords

Modern CSS provides keywords for content-aware sizing:

CSS

/* As wide as the widest piece of content */
.wide { width: max-content; }

/* As narrow as possible without causing overflow */
.narrow { width: min-content; }

/* Shrinks and grows smartly based on available space */
.smart { width: fit-content; }

Practical Example: Centered Button

CSS

.centered-button {
  width: fit-content;
  margin: 0 auto;
  padding: 0.75rem 2rem;
  /* Button is only as wide as needed, and centered */
}

Common Sizing Patterns

Full-Bleed Section

CSS

.full-bleed {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

Aspect Ratio Box

CSS

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

Card with Minimum Height

CSS

.card {
  min-height: 250px;
  display: flex;
  flex-direction: column;
}

.card-content {
  flex: 1;
}

.card-footer {
  margin-top: auto;
}

Debugging Sizing Issues

When elements aren't sizing as expected:

Check box-sizing — Is border-box applied?
Check parent dimensions — Percentage heights need explicit parent height
Check display type — width/height don't work on inline elements
Check overflow — Content might be overflowing
Use browser DevTools — Inspect computed dimensions

What You Should Remember

Use max-width for responsive containers, never just width
Percentage heights require explicit parent height
box-sizing: border-box makes sizing intuitive
min-height: 100vh for full-page layouts
fit-content for content-aware centering
Always make images responsive with max-width: 100% and height: auto

Next, explore CSS Overflow to learn what happens when content exceeds these dimensions.