CSS Layout Techniques

CSS layout is the foundation of every visual design on the web. Before any framework or design tool can help you arrange content beautifully, you need to understand how browsers naturally place elements on the page — and how to override that natural behavior when your design demands it. Modern CSS gives developers a rich set of tools to go far beyond the browser's defaults, and mastering them means you can build everything from a simple centered card to a complex multi-column editorial layout with confidence.

To work effectively with CSS layout, you first need a clear mental model of how the browser handles elements before you apply any special styling. This is called the normal document flow, and it governs two fundamental categories of elements: block-level and inline.

Block-level elements — such as <div>, <p>, <h1> through <h6>, <section>, and <article> — behave like horizontal slabs stacked vertically. Each one stretches to fill the full width of its parent container and then forces the next element down onto a new line. Think of them as paragraphs in a book: they never sit side by side unless you explicitly instruct them to.

Inline elements — such as <span>, <a>, <strong>, and <em> — behave more like words in a sentence. They flow horizontally, sitting next to one another until they run out of horizontal room, at which point they wrap onto the next line. Inline elements respect only horizontal margins and padding; vertical spacing behaves differently and is often unintuitive.

Here is a simple illustration of how these two categories differ in practice:

<!-- Block elements stack vertically -->
<div style="background: lightblue;">First block</div>
<div style="background: lightcoral;">Second block</div>

<!-- Inline elements flow horizontally -->
<span style="background: lightgreen;">First span</span>
<span style="background: lightyellow;">Second span</span>

The two <div> elements will appear one above the other, each spanning the full available width. The two <span> elements will sit side by side on the same line. Understanding this difference is not just academic — nearly every layout decision you make will involve working with, or working around, this default behavior.

Normal flow works well for simple text documents, but real web pages are rarely simple. Menus need to sit horizontally. Sidebars need to run beside article content. Cards need to tile in a grid. This is exactly where layout tools like Flexbox and CSS positioning step in, giving you precise control over where elements appear regardless of their natural flow behavior.

Flexbox — short for the Flexible Box Layout Module — is one of the most practical and widely used layout tools in modern CSS. You activate it on a parent container (often called a flex container) by writing:

.container {
  display: flex;
}

That single declaration transforms the container's direct children into flex items. The browser now treats those children as participants in a flexible layout system rather than as ordinary block or inline elements. By default, flex items are arranged side by side in a horizontal row, which is already enough to solve many common layout problems — like placing navigation links in a header next to each other.

The flex-direction property lets you control the axis along which those items are arranged:

.container {
  display: flex;
  flex-direction: row;        /* default — items go left to right */
}

.container-column {
  display: flex;
  flex-direction: column;    /* items stack top to bottom */
}

.container-reverse {
  display: flex;
  flex-direction: row-reverse; /* items go right to left */
}

Choosing row makes Flexbox behave like a horizontal toolbar. Choosing column makes it behave more like stacking blocks vertically — but with the added bonus of Flexbox's powerful alignment controls, which you do not get with plain block flow.

One of Flexbox's most celebrated strengths is its ability to handle varying content sizes gracefully. Imagine three navigation buttons whose labels differ in length — "Home," "About," and "Contact Us." Without Flexbox you might need to set fixed widths or use awkward float hacks to make them line up neatly. With Flexbox, the container automatically distributes available space and keeps items aligned, regardless of how much text is inside each one.

Once you have a flex container, alignment is where Flexbox truly shines. Two properties do most of the heavy lifting: justify-content and align-items.

justify-content controls how flex items are positioned along the main axis — the direction defined by flex-direction. If your direction is row, the main axis runs horizontally. Here are the most important values and what they do:

align-items controls how flex items are positioned along the cross axis — perpendicular to the main axis. For a row direction, the cross axis runs vertically. Common values include:

The real power comes from combining the two. For example, centering a single card both horizontally and vertically inside a full-screen container becomes trivially easy:

.full-screen {
  display: flex;
  justify-content: center;   /* horizontal centering */
  align-items: center;       /* vertical centering */
  height: 100vh;
}

.card {
  width: 300px;
  padding: 2rem;
  background: white;
  border-radius: 8px;
}

Without Flexbox, achieving true vertical centering historically required a combination of absolute positioning, negative margins, or table-cell tricks. With justify-content: center and align-items: center on the parent, it takes just two lines.

Beyond container-level alignment, you can also control how individual flex items behave. Three properties are especially important: flex-grow, flex-shrink, and align-self.

flex-grow defines how much of the remaining free space in the container an item should absorb. It accepts a unitless number that acts as a ratio. If all items have flex-grow: 1, they share the remaining space equally. If one item has flex-grow: 2 and the others have flex-grow: 1, the item with 2 will grow twice as much as each of the others.

.sidebar {
  flex-grow: 1;   /* takes up 1 share of remaining space */
}

.main-content {
  flex-grow: 3;   /* takes up 3 shares — three times as wide as sidebar */
}

This is a clean, readable way to create proportional layouts without calculating pixel widths manually.

flex-shrink is the counterpart to flex-grow. When the container is too small to fit all its items at their natural or declared sizes, flex-shrink determines how much each item gives up. A value of 1 (the default) means all items shrink proportionally. Setting flex-shrink: 0 on an item prevents it from shrinking at all — useful for elements like icons or logos that should always stay at their intended size.

.logo {
  width: 120px;
  flex-shrink: 0;   /* never compress the logo */
}

.nav-links {
  flex-shrink: 1;   /* allowed to compress if needed */
}

align-self lets a single flex item override the container's align-items setting. All other items follow the container rule, but this one item positions itself according to its own align-self value. It accepts the same values as align-items: flex-start, flex-end, center, stretch, and baseline.

.container {
  display: flex;
  align-items: center;   /* all items vertically centered by default */
}

.special-item {
  align-self: flex-end;  /* this one item sits at the bottom */
}

This is particularly useful in navigation bars where most links are centered but a call-to-action button needs to be aligned differently, or in card layouts where one card should stretch to fill the full height while others wrap to their content.

Flexbox handles most layout problems elegantly, but sometimes you need to position an element relative to its surroundings or pin it to a fixed point on the screen. That is where CSS positioning comes in. The position property changes how an element is placed in or removed from the document flow, and it works hand in hand with the offset properties: top, right, bottom, and left.

position: relative moves an element from where it would naturally appear, using the offset properties, without removing it from the document flow. The space the element originally occupied is preserved — neighboring elements behave as if the element is still in its original place — but visually the element shifts.

.shifted {
  position: relative;
  top: 20px;    /* moves 20px down from its natural position */
  left: 10px;   /* moves 10px right from its natural position */
}

Relative positioning is also commonly used to establish a positioning context for absolutely positioned children, which leads us to the next value.

position: absolute fully removes an element from the normal document flow. Other elements on the page behave as though the absolutely positioned element does not exist. The element then places itself relative to its nearest ancestor that has a non-static position (i.e., any ancestor with position: relative, absolute, or fixed). If no such ancestor exists, the element positions itself relative to the initial containing block — effectively the page itself.

.card {
  position: relative;   /* establishes a positioning context */
  width: 300px;
  height: 200px;
}

.badge {
  position: absolute;
  top: 10px;
  right: 10px;   /* pinned to the top-right corner of .card */
  background: red;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
}

In this example, the .badge element sits in the top-right corner of .card, not the top-right corner of the entire page, because .card has position: relative. This parent-relative anchoring pattern is extremely common for notification badges, overlay labels, and decorative UI elements.

position: fixed removes an element from the document flow and places it relative to the viewport — the visible area of the browser window — rather than any parent element. A fixed element stays in exactly the same place on the screen as the user scrolls. This makes it ideal for persistent navigation bars, floating action buttons, cookie banners, and live chat widgets.

.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #333;
  color: white;
  padding: 1rem;
  z-index: 100;   /* ensures it appears above other content */
}

Note the use of z-index: 100. When elements are removed from normal flow via positioning, they can overlap other elements. The z-index property controls the stacking order: higher values appear in front of lower values. Always assign a high enough z-index to fixed navigation bars so they are not obscured by other content.

There is also position: sticky, a hybrid worth knowing. A sticky element behaves like a relative element in the flow until it reaches a specified scroll offset, at which point it behaves like a fixed element and sticks in place. It is commonly used for table headers that stay visible as users scroll through long data tables, or for section labels in long pages.

.section-header {
  position: sticky;
  top: 60px;   /* sticks 60px from the top of the viewport when scrolled */
  background: white;
  padding: 0.5rem;
}

Now that you understand the individual tools, the real skill lies in combining them to build complete, multi-section page layouts. A typical web page contains a header, a main content area (which might have a sidebar beside it), and a footer. Flexbox makes this surprisingly straightforward.

The outermost wrapper is often set to display: flex; flex-direction: column; so the header, main, and footer stack vertically and fill the available height:

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;   /* ensures the page fills the full viewport height */
  margin: 0;
}

header {
  background: #2c3e50;
  color: white;
  padding: 1rem 2rem;
}

main {
  flex-grow: 1;   /* main content expands to fill all remaining vertical space */
  display: flex;  /* nested flex container for sidebar + article */
  gap: 1.5rem;
  padding: 1.5rem;
}

footer {
  background: #2c3e50;
  color: white;
  text-align: center;
  padding: 1rem;
}

Inside <main>, a nested flex container creates the side-by-side sidebar and article layout. Because main itself is a flex container with the default flex-direction: row, its direct children — a <aside> for the sidebar and an <article> for the main content — will sit next to each other horizontally.

aside {
  width: 240px;
  flex-shrink: 0;    /* sidebar keeps its fixed width even on smaller screens */
  background: #ecf0f1;
  padding: 1rem;
  border-radius: 6px;
}

article {
  flex-grow: 1;      /* article takes all remaining horizontal space */
  background: white;
  padding: 1.5rem;
  border-radius: 6px;
}

The gap property on the main container automatically adds consistent spacing between the sidebar and the article, between rows of cards, or between any flex items — without you needing to add margin to individual elements and worry about double-margins at the edges. It is the cleanest way to maintain uniform spacing in modern CSS layouts.

Here is a complete example bringing all of these ideas together:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Layout Demo</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      font-family: sans-serif;
    }

    header {
      background: #2c3e50;
      color: white;
      padding: 1rem 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    nav a {
      color: white;
      margin-left: 1.5rem;
      text-decoration: none;
    }

    main {
      display: flex;
      flex-grow: 1;
      gap: 1.5rem;
      padding: 1.5rem;
      background: #f4f4f4;
    }

    aside {
      width: 220px;
      flex-shrink: 0;
      background: white;
      padding: 1rem;
      border-radius: 8px;
    }

    article {
      flex-grow: 1;
      background: white;
      padding: 1.5rem;
      border-radius: 8px;
    }

    footer {
      background: #2c3e50;
      color: white;
      text-align: center;
      padding: 1rem;
    }
  </style>
</head>
<body>
  <header>
    <span>My Site</span>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </nav>
  </header>

  <main>
    <aside>
      <p><strong>Sidebar</strong></p>
      <ul>
        <li>Category A</li>
        <li>Category B</li>
        <li>Category C</li>
      </ul>
    </aside>
    <article>
      <p>Main content area. This grows to fill available space.</p>
    </article>
  </main>

  <footer>
    <p>&copy; 2024 My Site</p>
  </footer>
</body>
</html>

This example demonstrates all the concepts covered: normal flow overridden by Flexbox, a column-direction outer layout ensuring the footer stays at the bottom, a row-direction nested layout creating the sidebar-plus-content structure, flex-grow and flex-shrink controlling how sections resize, justify-content and align-items centering and spacing the header navigation, and the gap property keeping spacing clean throughout.

Understanding these fundamentals — normal flow, Flexbox alignment, individual item control, and CSS positioning — gives you a versatile, dependable toolkit for building virtually any layout a design calls for. As you practice combining these properties, the logic becomes intuitive: think in terms of containers and their children, choose the right axis for your layout, and let Flexbox handle the proportional math so you can focus on the design.