CSS Layout Basics

Arranging Your Content

So far, we've used CSS to change colors and fonts. But its real power lies in controlling layout, which is how elements are arranged on a page. Before modern tools like Flexbox and Grid existed, web developers relied on a few core concepts to build everything from simple navigation bars to complex multi-column pages. Let's explore these foundational techniques.

Everything Is a Box

In CSS, every HTML element is treated as a rectangular box. This is the CSS box model. Whether it's a paragraph, an image, or a section divider, it has properties that define its space. Understanding this model is the first step to mastering CSS layout.

The box is made of four parts:

Content: The actual text, image, or other media.
Padding: The transparent space between the content and the border.
Border: A line that goes around the padding and content.
Margin: The transparent space outside the border, separating the box from other elements.

.my-box {
  width: 200px; /* Content width */
  padding: 10px; /* Space inside the border */
  border: 2px solid black; /* A visible border */
  margin: 15px; /* Space outside the border */
}

Changing these values allows you to control the spacing and size of any element on your page.

Placing Your Boxes

Once you understand the box, you can start placing it. The position property in CSS lets you move elements out of the normal document flow. You can use it to create overlapping elements, sticky headers, and much more.

Position Value	Description
`static`	The default value. The element follows the normal page flow.
`relative`	The element is positioned relative to its normal position.
`absolute`	The element is positioned relative to its nearest positioned ancestor.
`fixed`	The element is positioned relative to the browser window (the viewport).

With static, an element just sits where it's supposed to. Using relative, you can nudge an element with properties like top, right, bottom, and left without affecting the layout of other elements. They'll leave an empty space where the relative element would have been.

absolute positioning is more dramatic. It removes the element from the normal document flow entirely. Other elements will behave as if it isn't there. It's then positioned relative to its closest ancestor that has a position other than static.

fixed also removes the element from the flow, but it's always positioned relative to the browser window. This is perfect for creating navigation bars that stay on screen as the user scrolls.

Older Layout Methods

Before modern layout systems were introduced, developers got creative with the tools they had. Two common techniques for creating columns and side-by-side layouts were inline-block and float.

display: inline-block allows an element to have a set width and height (like a block element) but also sit next to other elements on the same line (like an inline element). It was a simple way to create a grid of items.

.column {
  display: inline-block;
  width: 30%;
  margin: 1%;
}

Another powerful tool was the float property. Originally designed to let text wrap around images, developers repurposed it to build entire page layouts. You could float an element to the left or right, and subsequent content would flow around it.

.sidebar {
  float: left;
  width: 25%;
}

.main-content {
  float: right;
  width: 70%;
}

The problem with floats is that they remove the element from the normal flow, which can cause the parent container to collapse. To fix this, you had to use a clear property on a subsequent element, telling it not to wrap around the floated item. This was often done with an empty <div> or a special CSS class, a technique known as a "clearfix."

These older methods worked, but they were often difficult to manage. Aligning items vertically was tricky, and creating responsive designs that adapted to different screen sizes required a lot of extra work and hacks. This is why modern tools like Flexbox and Grid were eventually created—to solve these problems elegantly.

Time for a quick check on these foundational concepts.

Quiz Questions 1/5

In the CSS box model, what is the correct order of components from the innermost part to the outermost?

Quiz Questions 2/5

You want to create a navigation bar that stays at the top of the screen even when the user scrolls. Which CSS position value is best for this task?

Understanding these core layout principles is essential, as they form the bedrock upon which modern CSS is built.

Modern CSS Container Design