Understanding the CSS box model and its quirks is key to completing compelling web page layouts, while avoiding the “why is this over there?” problems most new web designers face.

Goals: Use div and span elements on a page to create a basic web page layout.

Prerequisite: CSS Introduction

Time: 2 hours

Core Material

1. The Box Model
2. Box-sizing
3. div elements
4. A Simple div Example
5. The Float Flag Quirk
6. span elements
7. box-decoration-break

Before you can create effective web page layouts you need at least some comprehension how to measure elements in CSS, which will allow you to control the box model and how elements relate to each other in size and position on web pages.

1. CSS Linear Measurements
2. CSS Units for Angles, Time & Frequency
3. Which CSS Measurements To Use When

While everyone should be familiar with centimeters and have at least a rough understanding of pixels, there are several new measurement systems that require introduction:

1. rem
2. vh & vw
3. vmin & vmax
4. q

Optional

There are many more sizing properties and values in CSS than most developers appreciate. The following articles cover these lesser-known applications, with a particular focus on extrinsic and intrinsic values.

1. Creating Perfect Shapes
2. min-content
3. max-content
4. object-fit
5. fit-content
6. inline-block
7. calc

Recommended Reading

Read Shay Howe’s article on the box model and positioning from his Beginner’s Guide to HTML & CSS; read The CSS Layout Model together with Floats & Clearing from the Web Platform Docs.

Read Adam Schwartz’s “The Box” in The Magic of CSS as a summary, and follow it up my reading Layout.

When You’re Done

With the div and span elements and an understanding of the basic CSS box model, you’re almost ready to start making basic layouts on web pages.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.