Seeing the Boxes: Understanding CSS Layout
In the last post we covered creating a single box in CSS. Now let's expand that and talk about nested boxes — which is how you'll use boxes in an actual page layout. One outer box for the whole page, then a collection of boxes within it.
(I use the word "box." In CSS, it's also called a "container" — same thing.)
In this post we'll focus on seeing the boxes. In the next post, we'll write the CSS to create them. If we don't accurately see the boxes first, we'll dive into CSS without the full picture — and frustration sets in quickly without that preparation.
Learning to See the Layout as Boxes
Consider a classic web layout: a full-width header at the top, a main content area below, and a sidebar on the right. Do you see four boxes? This is the key skill. When you can see the boxes, you can re-create any layout in CSS.
The Outer Box (Wrapper)
This box includes everything — it's the outermost container, the wrapper, that holds all other boxes. In CSS it's typically called #wrapper or #container.
The Header Box
The obvious one. The box at the top of the page where the site header, logo, and navigation live.
The Content Box
The entire area below the header. This might seem optional, but including it gives you flexibility. If you later decide to add a left navigation sidebar, having this content box makes nesting new boxes inside it much easier. See boxes in a way that allows for future flexibility — not just today's layout.
The Right Side Box
The sidebar or secondary content area. With CSS we'll be able to place this exactly where we want it within the content box.
Practice Seeing Boxes Everywhere
Visit different websites. Mentally draw out the boxes you see. How many are there? Where are the outer containers? Where are the boxes nested inside? This mental model is the foundation of CSS layout — once you can see it, the code becomes much more intuitive.