CSS Height and Width

CSS Height and Width

CSS Height and Width – px, %, auto, min-max, vw, vh | TipsInLearning
Home CSS Course CSS Height and Width
CSS Lesson 7 of 12

CSS Height and Width

Control how big elements are on screen. Learn to use pixels, percentages, auto, viewport units (vw, vh), and min/max constraints to build flexible, responsive layouts — with full code examples and live browser output.

10 min read
Beginner
CSS Fundamentals
CSS Course
In This Lesson
10 min read Beginner
Progress0/12
Beginners often set a fixed width and wonder why the layout breaks on mobile — or forget to set height: auto on images and get stretched photos. This lesson covers exactly those mistakes. Understanding when to use pixels versus percentages versus viewport units is the foundation of every responsive layout you'll ever build.
What You'll Learn
width and height properties
px, %, em, vw, vh units explained
auto value and centring elements
min-width and max-width constraints
min-height and max-height constraints
Responsive sizing real-world patterns

What are CSS Height and Width?

The CSS width and height properties control how large an element is on screen. By default, block-level elements like <div> and <p> stretch to fill the full width of their container, and their height is determined by the content inside them.

CSS lets you override both of these defaults — setting exact sizes, percentage-based proportions, or responsive limits using min and max values. These properties are used on virtually every real webpage you'll ever build.

The 6 Height & Width Properties

CSS gives you six properties to control element sizing. Two set the size directly; four set constraints that keep sizing responsive and flexible:

width

Sets the horizontal size of an element.

height

Sets the vertical size of an element.

min-width

Element won't shrink narrower than this.

max-width

Element won't grow wider than this.

min-height

Element won't become shorter than this.

max-height

Element won't grow taller than this.

The width Property

width — Set horizontal size

The width property sets the horizontal size of an element. By default, block elements like <div> take 100% of their parent's width. Use this property to override that and set a specific size using any CSS unit.

CSS — width examples
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .full   { width: 100%;   background: #dbeafe; padding: 8px; }
    .half   { width: 50%;    background: #ede9fe; padding: 8px; }
    .fixed  { width: 200px;  background: #dcfce7; padding: 8px; }
  </style>
</head>
<body>
  <div class="full">width: 100%</div>
  <div class="half">width: 50%</div>
  <div class="fixed">width: 200px</div>
</body>
</html>
Browser Output
width: 100% — fills parent fully
width: 50% — half of parent
width: 200px — always 200px

The height Property

height — Set vertical size

The height property sets the vertical size of an element. By default an element is as tall as its content. Overriding this with a fixed height can cause overflow if the content is taller than the set value — handle this with overflow: auto or overflow: hidden.

CSS — height examples
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    div    { height: 100px; background: #ede9fe; padding: 8px; }
    nav    { height: 60px;  background: #7c3aed; color: white; padding: 8px; }
    main   { height: auto;   background: #f1f5f9; padding: 8px; }
  </style>
</head>
<body>
  <nav>Fixed 60px nav bar</nav>
  <div>Fixed 100px box</div>
  <main>auto height — grows with content</main>
</body>
</html>

CSS Size Units

CSS supports many different units for sizing. The right unit depends on whether you want a fixed, relative, or viewport-responsive size:

px
Pixels — fixed, exact size. Never changes. Best for small fixed elements like icons or nav bars.
%
Percentage of the parent element's size. Scales automatically when the parent resizes.
em
Relative to the element's own font size. 2em = twice the font size of that element.
rem
Relative to the root font size (usually 16px). Consistent across the entire page.
vw
Viewport Width — 1vw = 1% of the screen width. Changes as the window resizes.
vh
Viewport Height — 1vh = 1% of the screen height. Great for full-screen sections.

The auto Value

width: auto / height: auto

The auto value tells the browser to calculate the size automatically based on the element's content and context. For height, auto means the element grows as tall as its content needs — which is the default. For images, combining width: 100% with height: auto keeps the correct aspect ratio on any screen size.

You can also use margin: 0 auto to horizontally centre a fixed-width block element — the browser splits the remaining space equally on both sides.

CSS — auto value & centring
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    /* Centre a fixed-width block element */
    .container {
      width: 600px;
      margin: 0 auto; /* auto = equal left & right margin */
      background: #ede9fe;
      padding: 16px;
    }
    /* Responsive image — keeps aspect ratio */
    img {
      width: 100%;
      height: auto;
    }
  </style>
</head>
<body>
  <div class="container">This div is centred!</div>
</body>
</html>
Pro tip — Responsive images: Always set width: 100% and height: auto on images. This makes them scale down on small screens without distorting the aspect ratio — used on every professional website.

min-width, max-width, min-height, max-height

These four constraint properties let you set boundaries on how small or large an element can become. They're essential for responsive design — especially the max-width pattern used on page wrappers everywhere.

CSS — min/max properties
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    /* Responsive page container — used by TipsInLearning */
    .page-wrapper {
      width: 100%;        /* fills screen on mobile */
      max-width: 1200px; /* caps at 1200px on large screens */
      margin: 0 auto;    /* stays centred */
      background: #f1f5f9;
      padding: 16px;
    }

    /* Card with height boundaries */
    .card {
      width: 280px;
      min-height: 120px;  /* always at least this tall */
      max-height: 300px;  /* won't overflow beyond this */
      overflow: auto;     /* scroll if content overflows */
      background: #ede9fe;
      padding: 12px;
    }

    /* Button that never gets too narrow */
    .btn {
      min-width: 120px;
      padding: 8px 16px;
      background: #2563eb;
      color: white;
    }
  </style>
</head>
<body>
  <div class="page-wrapper">
    <div class="card">Card with min/max height</div>
    <button class="btn">Click Me</button>
  </div>
</body>
</html>
Most common real-world pattern: Set width: 100% + max-width: 1200px + margin: 0 auto on your page wrapper. This fills the screen on mobile, caps at 1200px on desktops, and stays centred — used by TipsInLearning and virtually every professional website.

Percentage Width

Percentage widths are relative to the parent element

When you set width: 50%, the element takes 50% of its parent's width — not the screen width. This makes percentage widths perfect for creating flexible, proportional layouts like sidebars, multi-column grids, and fluid content areas.

CSS + HTML — Percentage width layout
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .layout  { display: flex; gap: 12px; }
    .sidebar { width: 30%; background: #ede9fe; padding: 12px; }
    .main    { width: 70%; background: #dbeafe; padding: 12px; }
  </style>
</head>
<body>
  <div class="layout">
    <aside class="sidebar">30% Sidebar</aside>
    <main class="main">70% Main Content</main>
  </div>
</body>
</html>
Browser Output
30% Sidebar
70% Main Content

Viewport Units — vw and vh

vw / vh — Relative to screen size, not parent

1vw = 1% of the viewport (browser window) width. 1vh = 1% of the viewport height. These units are relative to the screen, not the parent element — which makes them powerful for full-screen hero sections and truly responsive font sizes that scale with the window.

CSS — Viewport units vw & vh
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    /* Full-screen hero section */
    .hero {
      width: 100vw;   /* always full screen width */
      height: 100vh;  /* always full screen height */
      background: #001233;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    /* Responsive heading that scales with window */
    h1 { font-size: 5vw; }
  </style>
</head>
<body>
  <div class="hero">
    <h1>Full Screen Hero</h1>
  </div>
</body>
</html>

Complete Example

This example combines all six sizing properties in a realistic page layout — the same pattern used here on TipsInLearning:

HTML + CSS — Height & Width in a real layout
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    /* Responsive page wrapper */
    .page {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
    }

    /* Full-screen hero */
    .hero {
      width: 100%;
      height: 60vh;
      background: #001233;
      color: white;
    }

    /* Fixed-height navbar */
    .nav {
      width: 100%;
      height: 64px;
      background: #0e0521;
    }

    /* Cards with min/max height */
    .card {
      width: 300px;
      min-height: 150px;
      max-height: 300px;
      overflow: auto;
    }

    /* Responsive image */
    img {
      width: 100%;
      height: auto;
    }

    /* Sidebar layout */
    .layout  { display: flex; }
    .sidebar { width: 25%; min-width: 200px; }
    .main    { width: 75%; }
  </style>
</head>
<body>
  <div class="page">
    <nav class="nav"></nav>
    <div class="hero">Hero Section</div>
    <div class="layout">
      <aside class="sidebar">Sidebar</aside>
      <main class="main">Main Content</main>
    </div>
  </div>
</body>
</html>

Common Mistakes

Setting a fixed height on elements that need to grow
If you set height: 200px on a div and later add more text, the text overflows outside the box. Use height: auto (the default) or min-height: 200px instead — the element will grow with its content while still starting at a minimum size.
Forgetting height: auto on images
If you set width: 100% on an image but leave height unset or use a fixed value, the image will appear stretched or squashed. Always pair width: 100% with height: auto to preserve the aspect ratio.
Using a fixed pixel width instead of max-width
Writing width: 1200px means the element is exactly 1200px wide on every screen — including 320px phones, where it will cause horizontal scrolling. Write width: 100%; max-width: 1200px instead so it fills smaller screens and caps on large ones.
Expecting percentage height to work without a parent height
height: 50% only works if the parent element has a defined height. If the parent height is auto (which it is by default), percentage height on the child has no reference value and will behave like auto. Use vh units or flexbox instead for full-height sections.
Challenge — Experiment with Sizing
1Create a <div> with width: 400px and height: 200px — add a background colour to see it clearly
2Build a responsive container: width: 100% + max-width: 900px + margin: 0 auto — resize the browser to see it adapt
3Create a 2-column layout using width: 30% for a sidebar and width: 70% for main content inside a display: flex parent
4Create a hero section with width: 100vw and height: 80vh — resize the browser and watch it always fill most of the screen
5Add an <img> with width: 100% and height: auto — resize the browser and notice it scales without distorting
Lesson Summary
Wwidth = horizontal size · height = vertical size of any element
pxpx = fixed · % = of parent · vw/vh = of screen · em/rem = of font
Aauto = browser decides; use margin: 0 auto to centre fixed-width elements
↔max-width caps growth · min-width prevents shrinking below a threshold
📱Responsive pattern: width: 100% + max-width: 1200px + margin: 0 auto
🖼Images: always use width: 100% + height: auto for responsive sizing

Questions About CSS Height & Width

The most common questions beginners ask about sizing elements in CSS:

What is the difference between width: 100% and width: 100vw?
width: 100% makes the element fill 100% of its parent element's width. If the parent is a 600px column, the element will be 600px. width: 100vw fills 100% of the viewport (browser window) width — it ignores any parent container. Use 100% inside layouts. Use 100vw for elements that need to break out and fill the full screen, like a full-width hero section.
Why doesn't height: 50% work on my div?
Percentage heights require the parent to have a defined height. If the parent's height is auto (the default), the browser has no reference value to calculate 50% of, so it falls back to auto. Solutions: set an explicit height on the parent element (like height: 400px or height: 100vh), or use viewport units (height: 50vh) which work without a parent height reference.
When should I use max-width instead of width?
Use max-width whenever you want an element to be flexible on small screens but capped on large ones. The standard pattern for page containers is width: 100%; max-width: 1200px; margin: 0 auto — on a 375px phone it fills the screen, on a 1400px monitor it stops at 1200px and stays centred. Using width: 1200px alone causes horizontal scrolling on any screen narrower than 1200px.
How do I make a div fill the full height of the screen?
The simplest way is height: 100vh — this always equals the full viewport height regardless of parent sizing. Alternatively, set height: 100% on the element, but you must also set height: 100% on html and body for this to work, which is why 100vh is almost always preferred for full-screen sections.
Does width include padding and border?
By default in CSS, width sets the content width only — padding and border are added on top, making the actual element wider than you set. This surprises many beginners. The fix is box-sizing: border-box, which makes width include padding and border. Most modern stylesheets apply this globally: *, *::before, *::after { box-sizing: border-box; }. The CSS Box Model lesson on TipsInLearning covers this in full detail.
What happens if content is taller than a fixed height?
By default the content overflows visibly outside the element's box — it spills out, often overlapping other elements. You control this with the overflow property: overflow: hidden clips the overflowing content so it disappears, overflow: auto adds a scrollbar only when needed, and overflow: scroll always shows a scrollbar. For cards and modals, overflow: auto combined with max-height is the most common pattern.
What is the difference between min-height and height?
height: 200px locks the element to exactly 200px — it won't grow even if the content is taller, causing overflow. min-height: 200px guarantees the element is at least 200px tall but allows it to grow taller if the content requires it. Use min-height for cards and sections where you want a minimum size but don't want to clip taller content.

Post a Comment