Mastering CSS Layouts

An interactive journey through the history of CSS alignment. From the early days of <table>s to the power of modern Flexbox and Grid.

Learn by Doing.

This site is an interactive guide dedicated to one of the most fundamental parts of web development: aligning content. We explore every major layout method used throughout the history of CSS.

Learn the "why" behind each technique, see how they were used, and play with live examples to master them.

Explore the Methods

CSS Flexbox

Modern

The powerful, modern standard for one-dimensional layout. Perfect for aligning components, navigation bars, and distributing space.

CSS Grid

Modern

The ultimate two-dimensional layout system. Ideal for entire page layouts, complex dashboards, and responsive, gap-aware designs.

Positioning

Contextual

Take elements out of the normal flow. Ideal for overlays, popups, and precise UI details. (Covers absolute, relative, etc.)

Floats

Legacy

The original method for creating columns and wrapping text around images. A cornerstone of "classic" CSS (and clearfix!).

Inline-Block

Legacy

A clever trick from the past to place block-level items in a row (with a few quirks!). A step up from floats for component layout.

HTML Tables

Ancient

The very first method for layout. See how <table>s were used for entire websites (and why we don't do that anymore).