Holy-grail layout

As explained in Web Design Playground

A classic web page layout pattern with a header, main content area, sidebars, and footer arranged to keep the footer at the bottom and the main content central.

A holy-grail layout is a content page pattern with a header, navigation bar, main column, sidebar, and footer. It keeps the main content central and the footer at the bottom, with common variations for column count and footer placement. section 11.1 section 12.17

It is used for blog posts, articles, essays, how-tos, and similar content-focused pages. The layout is a teaching pattern for comparing page layout methods. section 11.1 section 11.13 section 12.11

Common ways to build it include:

• Using float to place the header logo and title, navigation items, and content columns side by side. section 11.13
• Using display: inline-block for the same side-by-side pieces, with inline blocks flowing left to right by default. section 11.23
• Using flexbox with a vertical body container, horizontal flex containers for rows, and flex-grow to make the main area fill empty vertical space. section 12.11 section 12.17

Flexible footer behavior

In a flexbox version, setting the body to a vertical flex container, giving it min-height: 100vh, and setting main to flex-grow: 1 makes the footer sit at the bottom of the browser window. section 12.11 section 12.17

A schematic figure showing one version of the layout helps connect the named parts to the page structure. section 11.1

How Web Design Playground covers it

How deep it goes

Explains the main parts and compares float, inline-block, and flexbox implementations, but does not fully standardize every variation.

Examples

Uses header logos and titles, navigation rows, article-and-aside columns, and a layout figure as teaching examples.

What it assumes

Assumes basic page-layout methods and teaches the layout idea from zero before showing floats, inline-block, and flexbox.

What you can do after

Builds a content page with centered main content, a sidebar, and a footer that can stay at the bottom.

How it connects

Connects header, navigation bar, sidebar, footer, float, inline-block, flexbox, and main content.

liveBookmanning.com

Read Web Design Playground on liveBook Get the book at manning.com

Related concepts

• flexboxuses · Flexbox is a CSS one-dimensional layout model for arranging, sizing, aligning, and distributing items along a row or column.
• navigationhas part · Navigation is the process and structure that enables movement among pages, sections, views, or other destinations in a digital system.
• footer sectionhas part · A footer is a region associated with a document or section that contains closing or supplementary content, often positioned at the bottom.
• head elementhas part · The HTML head element contains document metadata and resource references that are not normally displayed as the page's main content.
• inline-blockuses · Inline-block is a CSS display value that places an element in inline flow while retaining block-like sizing and layout behavior.

This explainer was generated by Manning's knowledge graph from the text of Web Design Playground. The section links point to the parts of the book it draws on.