How to Set Width and Height in CSS

Use width and height when you need predictable sizing for cards, images, buttons, inputs, modals, and layout containers. The key is to choose fixed, flexible, or maximum sizes based on how the element should behave.

What you’ll build or solve

You’ll learn how to set width and height in CSS using fixed values, percentages, and max constraints. You’ll also know when to use flexible sizing instead of rigid dimensions.

When this approach works best

This approach is the right choice when elements feel inconsistent, overflow their containers, or need a predictable visual footprint.

Common real-world scenarios include:

• Card layouts
• Hero images
• Buttons
• Input fields
• Modal windows

This is a bad idea when the content length changes heavily and fixed heights could cause clipping. In those cases, use min-height or let the content define the size.

Prerequisites

You only need:

• A basic HTML file
• A text editor
• Basic HTML and CSS knowledge

Step-by-step instructions

Step 1: Apply width and height to the target element

Use fixed pixel values when the component size should stay controlled.

<div class="card">USA pricing</div>

<style>
  .card {
    width: 300px;
    height: 200px;
  }
</style>

For flexible layouts, use percentages and max constraints.

<div class="hero">France product launch</div>

<style>
  .hero {
    width: 100%;
    max-width: 800px;
    min-height: 300px;
  }
</style>

What to look for:

• Fixed pixels work well for controlled UI components
• Percentage widths adapt better to screen size
• max-width prevents oversized layouts
• min-height is often safer than rigid height
• Use equal width and height for square components

Examples you can copy

Card size

<div class="card">UK course plan</div>

<style>
  .card {
    width: 320px;
    height: 220px;
  }
</style>

Responsive hero block

<div class="hero">USA landing page</div>

<style>
  .hero {
    width: 100%;
    max-width: 900px;
    min-height: 400px;
  }
</style>

Square avatar

<img class="avatar" src="mentor.jpg" alt="France mentor">

<style>
  .avatar {
    width: 80px;
    height: 80px;
  }
</style>

Common mistakes and how to fix them

Mistake 1: Using rigid height for dynamic content

What the reader might do:

.card {
  height: 100px;
}

Why it breaks: longer text may overflow or get clipped.

Corrected approach:

.card {
  min-height: 100px;
}

Mistake 2: Using fixed width on responsive layouts

What the reader might do:

.hero {
  width: 1200px;
}

Why it breaks: the layout can overflow smaller screens.

Corrected approach:

.hero {
  width: 100%;
  max-width: 1200px;
}

Mistake 3: Forgetting equal dimensions for square elements

What the reader might do:

.avatar {
  width: 80px;
  height: 60px;
}

Why it breaks: the element no longer stays square.

Corrected approach:

.avatar {
  width: 80px;
  height: 80px;
}

Troubleshooting

If content gets cut off, switch from height to min-height.

If layouts overflow mobile screens, replace fixed widths with % and max-width.

If square elements look distorted, make width and height equal.

If sizing feels inconsistent, standardize common dimensions for repeated components.

Quick recap

• Use width and height for predictable sizing
• Use % and max-width for responsive layouts
• Use min-height for dynamic content
• Keep square elements equal on both axes
• Avoid rigid fixed sizes on mobile-first layouts