BeingXpert Learn & Build Future

11. CSS Height and Width

What you will learn

  • How to set width and height
  • Pixels, percentages, and automatic sizing
  • Minimum and maximum sizes
  • How to make images fit small screens

Width and height

The width and height properties set the size of an element’s content area. They apply to block elements and to images, but not to ordinary inline elements such as <span>.

Example

<style>
  .box {
    width: 300px;
    height: 80px;
    background-color: #cfe6ff;
    border: 2px solid #0d6efd;
  }
</style>

<div class="box">300px wide, 80px high</div>

Output

300px wide, 80px high

Values you can use

Value Meaning
auto The browser decides. This is the default
200px A fixed size in pixels
50% A percentage of the parent’s size
50vw, 50vh A percentage of the window width or height

Percentages

Percentage widths change with the parent, so they adapt to different screen sizes.

Example

<style>
  .parent { width: 400px; background-color: #eaf5ff; padding: 6px 0; }
  .half { width: 50%; background-color: #0d6efd; color: white; }
</style>

<div class="parent">
  <div class="half">50% of the parent</div>
</div>

Output

50% of the parent

Minimum and maximum sizes

  • max-width stops an element from growing beyond a size.
  • min-width stops it from shrinking below a size.
  • min-height lets a box grow taller if its content needs more room.

Example

<style>
  .page {
    max-width: 600px;
    margin: 0 auto;
    background-color: #eaf5ff;
    padding: 16px;
  }
</style>

<div class="page">
  Wide screens: this box stops growing at 600px.
  Narrow screens: it shrinks to fit. Try resizing the result panel.
</div>

max-width is usually better than a fixed width. A fixed 600px box would cause sideways scrolling on a 400px phone, while max-width: 600px adapts.

Fixed height can overflow

If you set a fixed height and the content is taller, the text spills out of the box. Prefer min-height unless you really need an exact size.

Making images responsive

Syntax

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

The image never grows wider than its container, and height: auto keeps its proportions.

Common mistakes

  • Setting width on an inline element such as <span>, which has no effect.
  • Fixed widths that are wider than a phone screen.
  • Fixed heights that cut off text when it wraps.
  • Percentage heights that do nothing because the parent has no set height.

Exercise

Make .panel take up the full width of its container but never exceed 500px, centred, with a background of #eaf5ff and 20px of padding.

Show solution 
<style>
  .panel {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    background-color: #eaf5ff;
    padding: 20px;
  }
</style>
<div class="panel">Resize me</div>

Knowledge check

1. Which property stops an element growing past a size?

max-width

2. What do two lines, max-width: 100%; height: auto;, do for an image?

They make it fit its container while keeping its proportions.

3. Why is min-height often safer than height?

The box can grow if the content needs more room.

Summary

  • Set size with width and height in px, %, or viewport units.
  • Use max-width and min-height for flexible layouts.
  • Make images responsive with max-width: 100%; height: auto;.
Scroll to Top