Width and Height: Sizing Elements

When you first start building web pages, one of the biggest questions is: How do I control the size of things on the screen? That’s where width and height come in.

In this beginner‑friendly guide, you’ll learn how to:

Set the width and height of elements
Use different units (like pixels and percentages)
Make boxes that look the way you want
Avoid a few common beginner mistakes

You don’t need any previous coding experience. We’ll go step by step, and you can follow along in your browser.

Getting Set Up (No Special Tools Needed)

You can do everything in this article with:

A web browser (Chrome, Firefox, Edge, Safari, etc.)
A simple text editor (Notepad, VS Code, or anything you like)

Steps to create a test page:

Create a new file on your computer called sizing.html.
Open it in your text editor.
Paste the following starter code and save the file:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Width and Height Practice</title>
  <style>
    /* We'll add more CSS here soon */
  </style>
</head>
<body>
  <h1>Width and Height Practice</h1>

  <!-- We'll add elements here -->

</body>
</html>

Double‑click sizing.html to open it in your browser.

You should see a simple page with the title "Width and Height Practice".

Example 1: A Simple Box with Fixed Size

Let’s start with a basic example: a box that is 200 pixels wide and 100 pixels tall.

Step 1: Add a box to your HTML

In the <body> section, add this right under the <h1>:

<div class="box1">This is box 1</div>

Step 2: Style the box with width and height

In the <style> section, add:

.box1 {
  width: 200px;          /* Box is 200 pixels wide */
  height: 100px;         /* Box is 100 pixels tall */
  background-color: lightblue;  /* Light blue background */
  border: 2px solid blue;       /* Blue outline around the box */
}

What this does:

width: 200px; makes the box exactly 200 pixels wide.
height: 100px; makes it 100 pixels tall.
background-color and border make it easier to see the box.

What you should see:

Reload your sizing.html page. You should see a light blue rectangle under the heading, with the text "This is box 1" inside it.

Try it yourself

Change width: 200px; to width: 300px; and reload the page. Watch the box get wider. Then try changing height too.

Example 2: Using Percentages for Flexible Width

Pixels give you fixed sizes. Percentages give you flexible sizes that adjust with the page.

Let’s make a second box that takes up half the width of the page.

Step 1: Add another box in the HTML

Under the first box, add:

<div class="box2">This is box 2 (50% width)</div>

Step 2: Style the second box

In your <style> section, add:

.box2 {
  width: 50%;                    /* 50% of the page width */
  height: 80px;                  /* Fixed height of 80 pixels */
  background-color: lightgreen;  /* Light green background */
  border: 2px solid green;       /* Green outline */
}

What this does:

width: 50%; means the box will always be half as wide as its container (in this case, the page body).
If you make the browser window narrower or wider, this box will resize with it.

What you should see:

Reload the page. You should now see a green box under the blue one. When you resize the browser window, the green box’s width changes.

Try it yourself

Resize the browser window and watch how:

Box 1 (pixels) stays the same width.
Box 2 (percent) grows and shrinks.

Then experiment:

Change width: 50%; to width: 80%;.
Try width: 25%; to make a smaller box.

Example 3: Understanding Content, Padding, and Borders

Now let’s see how space inside the box affects its size.

We’ll add padding, which is the space between the text and the border.

Step 1: Add a third box

In the HTML, under box 2, add:

<div class="box3">This is box 3 with padding</div>

Step 2: Style box 3

Add this to your <style> section:

.box3 {
  width: 200px;                /* Content area width */
  height: 100px;               /* Content area height */
  padding: 20px;               /* Space inside the box */
  background-color: peachpuff; /* Light orange background */
  border: 2px solid orange;    /* Orange border */
}

What this does:

padding: 20px; adds 20 pixels of space on all sides of the text, inside the border.
The content area is still 200px by 100px, but the actual box you see is larger because of the padding and border.

What you should see:

A peach-colored box that looks bigger than box 1, even though they both say width: 200px; height: 100px;.

This confuses many beginners: width and height apply to the content area, not including padding and border.

Optional: Box-Sizing (To Keep Things Simple)

If you prefer width to include padding and border (so the total width stays 200px), you can use this CSS:

* {
  box-sizing: border-box; /* Total size includes padding and border */
}

Add that at the top of your <style> section. Now when you say width: 200px;, the element’s total width (content + padding + border) will be 200px.

This setting is very common in modern websites.

Example 4: Minimum and Maximum Size

Sometimes you want an element that can grow or shrink, but not too much. That’s where min-width, max-width, min-height, and max-height help.

Let’s make a box that stretches, but never goes too small or too big.

Step 1: Add a flexible box

In the HTML, add:

<div class="box4">
  This is box 4. Try resizing the window to see how big or small it gets.
</div>

Step 2: Style the flexible box

Add this to your <style> section:

.box4 {
  width: 80%;                 /* Start at 80% of the page width */
  min-width: 200px;           /* Never smaller than 200px */
  max-width: 600px;           /* Never larger than 600px */
  min-height: 60px;           /* At least 60px tall */
  background-color: lightgray;
  border: 2px solid #555;
}

What this does:

width: 80%; makes the box flexible.
min-width: 200px; stops it from becoming too tiny.
max-width: 600px; stops it from stretching too wide.
min-height: 60px; keeps it tall enough for the text.

What you should see:

Reload the page, then resize your browser window. The box grows and shrinks, but always stays between 200px and 600px wide.

Try it yourself

Play with the values:

Change max-width: 600px; to 400px.
Remove min-width and see how small it can get.

This is very useful when designing pages that must look good on both phones and large screens.

Common Beginner Questions

1. My height doesn’t change. Why?
Some elements grow automatically with their content. If the content is small, adding height might not look different at first. Also, some layout rules (more advanced topics) can affect this.

2. Should I always use pixels or percentages?
Both are useful. Use pixels when you want fixed, exact sizes (like icons). Use percentages when you want things to adapt to the screen size.

3. My text is going outside the box. What can I do?
You might need to:

Increase height or remove it to let the box grow naturally.
Add padding so text isn’t right against the border.

Try It Yourself: Build a Simple Card

Let’s put what you’ve learned together into a simple “info card.”

Add this HTML inside <body>:

<div class="card">
  <h2>My First Card</h2>
  <p>This is a simple card with controlled width and height.</p>
</div>

Add this CSS to your <style> section:

.card {
  width: 300px;         /* Fixed card width */
  min-height: 150px;    /* Minimum height for content */
  padding: 20px;        /* Space inside the card */
  background-color: #fffbe6;
  border: 1px solid #ccc;
}

Now you have a neat little card that you can reuse and style further.

Experiment ideas:

Change the width to 50% instead of 300px.
Add max-width: 400px; to control how big it can get.
Adjust padding to see how it affects the card’s look.

Quick Recap and What’s Next

You’ve just taken a big step in understanding how to size elements on a web page.

Key takeaways:

width and height control the size of the content area of an element.
Pixels (px) give fixed sizes; percentages (%) give flexible, responsive sizes.
padding and border add to the total visible size of an element (unless you use box-sizing: border-box;).
min-width, max-width, min-height, and max-height help you set size limits.

You’ve already created several types of boxes and a simple "card" component. That’s real web development work.

Next, you might explore:

Margins (space outside elements)
Centering elements on the page
Responsive layouts using flexbox or grid

Keep experimenting, change the numbers, break things, and fix them again. Every small test you try builds your skills and confidence.

Mudzinga