A 30-Year History of CSS Layout —
From Tables to float to Grid

The Beginning — When HTML Had No Concept of Layout

When Tim Berners-Lee drafted the first HTML specification in 1991, layout wasn't part of the picture. HTML was a markup language for structuring scientific documents at CERN — headings, paragraphs, lists, and hyperlinks. The idea of placing elements side by side simply didn't exist in that original vision. Documents flowed from top to bottom, and that was the end of it.

As Mosaic (1993) and Netscape Navigator (1994) brought the web to a wider audience, something changed. Businesses and individuals wanted visual control. They wanted columns, headers, sidebars — the kind of layouts they were used to in print media. But HTML offered almost no tools for this. There was no display: flex, no grid-template-columns, no float for layout. There was, however, the <table> tag.

Tables were meant for tabular data — rows and columns of numbers, schedules, comparison charts. But their ability to create a rigid grid of cells made them irresistible for layout purposes. And so began the table layout era — a period that lasted well over a decade.

The Table Layout Era — Why It Was the Right Answer at the Time

From the late 1990s through the early 2000s, table-based layout was the de facto standard for web design. Today it's often treated as an embarrassing relic, but looking at the context of the time, it was the most practical solution available.

CSS was in its infancy. Browser implementations were wildly inconsistent — the same stylesheet could look completely different in Netscape Navigator and Internet Explorer. Tables, on the other hand, rendered reliably across browsers. You could create columns, align elements vertically, and nest structures within structures. It worked. It was predictable. And when the alternative was no layout at all, "predictable" was worth a lot.

<table width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="2">Header</td>
  </tr>
  <tr>
    <td width="200">Sidebar</td>
    <td>Main Content</td>
  </tr>
  <tr>
    <td colspan="2">Footer</td>
  </tr>
</table>

The problem, of course, was that structure and presentation became hopelessly entangled. Changing a layout meant rewriting HTML. Adding a column meant restructuring the entire table hierarchy. As websites grew more complex, this approach became a maintenance nightmare.

The float Era — When "Web Standards" Changed Everything

The early 2000s brought a tectonic shift in how the web community thought about building websites. The Web Standards movement, championed by Jeffrey Zeldman and the Web Standards Project (WaSP), argued that HTML should handle structure and CSS should handle presentation. Zeldman's 2003 book Designing with Web Standards became a manifesto for an entire generation of web developers.

That same year, CSS Zen Garden launched. Created by Dave Shea, this project demonstrated that a single HTML document could be transformed into radically different designs by swapping only the CSS. It proved — visually, undeniably — that CSS had real expressive power. For many designers, myself included, CSS Zen Garden was the moment CSS stopped being an afterthought and became the main event.

There was just one problem: CSS still had almost no layout-specific properties. The float property — originally designed for wrapping text around images, like a magazine pull-out — became the de facto layout tool. It was never meant for this purpose. But for over a decade, it was all we had.

Working with floats required its own set of rituals. Floated elements were removed from normal document flow, causing their parent containers to collapse to zero height. The "clearfix" — a pseudo-element hack that forced the parent to acknowledge its floated children — became one of the most copy-pasted code snippets in web history.

/* Used on millions of websites worldwide */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

I started building websites during the peak of the float era. I remember spending half a day trying to get a two-column layout to behave consistently, and entire days debugging collapsed containers in IE6. Those experiences were frustrating at the time, but they gave me a deep appreciation for what came next.

Flexbox — CSS Finally Gets a Real Layout Tool

The first draft of the Flexible Box Layout specification appeared in 2009, but the road to practical adoption was long and bumpy. The spec went through multiple revisions, and early browser implementations were fragmented — different vendors shipped different versions with different vendor prefixes.

Flexbox became truly production-ready around 2015, when Chrome, Firefox, Safari, and the new Edge browser all supported the final specification without prefixes. IE11 lingered as the last holdout with partial and buggy support, but the industry had already moved on.

Flexbox was, for the first time in CSS history, a property designed specifically for layout. Write display: flex on a parent, and its children line up in a row. Center something vertically and horizontally in three lines. Distribute space automatically. The hacks that defined the float era were replaced by proper, intentional CSS properties.

CSS Grid — The Completion of Two-Dimensional Layout

In 2017, CSS Grid Layout arrived in major browsers. Where Flexbox handles one dimension — a single row or column — Grid controls both dimensions simultaneously. You define rows and columns as a unified system, and place elements within that grid with precision.

The push for CSS Grid was driven by advocates like Rachel Andrew, who wrote extensively about its specification, and Jen Simmons, whose "Layout Land" YouTube channel showed designers and developers what was newly possible. Their work was essential in translating a complex specification into practical understanding.

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 24px;
  min-height: 100vh;
}

There's a poetic symmetry to CSS Grid. The problem that table layouts were trying to solve — placing elements in a two-dimensional grid — is precisely the problem that CSS Grid solves, but with a clean separation of structure and presentation. In a sense, CSS Grid is the legitimate heir to the table layout approach. It just took thirty years for CSS to catch up with what designers wanted all along.

Where We Stand Now — and What Freedom Demands

In 2026, we're living in the most capable CSS environment in history. Flexbox, Grid, container queries, subgrid, the :has() selector — layouts that were impossible five years ago can now be built in a few lines. The toolbox is full.

But abundance creates its own challenge. When there were no proper layout tools, you used what you had and didn't think twice. When float was the only option, the choice was already made for you. Now, with a rich set of purpose-built layout mechanisms available, the question shifts from "how do I make this work?" to "why am I choosing this approach?" That's a design question, not a technical one.

Looking back across thirty years of CSS layout, what I see is a story of resourcefulness — generations of developers making the best of imperfect tools. Table layout, float with clearfix, vendor-prefixed Flexbox — each was the best available solution of its era. Dismissing them as "mistakes" misses the point. Understanding them in context is what lets us appreciate why Flexbox and Grid are designed the way they are.

Every line of CSS you write today carries thirty years of accumulated decisions, experiments, and hard-won lessons. The next time you type display: flex or display: grid, take a moment to appreciate the journey that made those two words possible. The web didn't arrive here by accident — it was built, one workaround at a time, by people who refused to accept that layout was impossible.