Understanding Web Flow

Interactive demonstrations for graphic design students learning web layout

Welcome! These demonstrations will help you understand how web layout works. Unlike InDesign where you place frames at specific coordinates, web content flows — elements push each other, containers respond to their contents, and everything adapts to different screen sizes. Work through these demos in order to build your understanding step by step.
1

Block vs Inline Elements

Learn the fundamental difference between elements that create new "paragraphs" (block) and elements that flow within a line (inline). This is the foundation of all web layout.

Key concepts: Flow behaviour, line breaks, natural width, wrapping
Start with Demo 1 →
2

Nested Containers

Discover how web layouts are built from boxes inside boxes. Parents grow to fit their children, and everything maintains relationships — fundamentally different from independent frames.

Key concepts: Parent/child relationships, containers growing to fit content, hierarchy
Continue to Demo 2 →
3

Fixed vs Flexible Widths

Explore the difference between fixed pixel widths and flexible percentage-based widths. Learn why responsive design uses constraints instead of exact measurements.

Key concepts: Pixels vs percentages, max-width, responsive behaviour, fragility of fixed values
Continue to Demo 3 →
4

Margin and Padding

Understand the crucial difference between space outside an element (margin) and space inside an element (padding). Both create spacing but work in fundamentally different ways.

Key concepts: Space between elements, space inside elements, backgrounds and borders
Continue to Demo 4 →
5

Inline-Block Behaviour

Learn about the hybrid display mode that combines the best of block and inline. Perfect for navigation menus, image galleries, and many common layout patterns.

Key concepts: Hybrid behaviour, controlled dimensions, wrapping, practical applications
Continue to Demo 5 →
6

Absolute vs Relative Positioning

Understand how positioning breaks elements out of normal flow. Learn when to use relative positioning (nudging from original position) versus absolute positioning (placing at exact coordinates).

Key concepts: Position types, offset properties, breaking out of flow, coordinate systems
Continue to Demo 6 →

Teaching Notes

These demonstrations are designed to be explored sequentially. Each builds on concepts from the previous demos. Students should experiment with resizing containers and adding elements to observe how web flow responds to changes.

The goal is not to memorise technical terms, but to develop an intuition for how web content behaves — flowing, wrapping, and responding rather than sitting at fixed coordinates.

All demos work offline and require no external dependencies.
Designed for graphic design students transitioning from InDesign to web layout.