Chapter 22: HTML & CSS Layout
HTML & CSS: Layout
Until now we mostly talked about single elements — colors, typography, box model, selectors… Now we talk about how to arrange many elements together on the page so that everything looks intentional, balanced, beautiful, and works nicely on mobile too.
Layout = the art of deciding where each piece goes, how big it is, how it behaves when the window size changes, and how elements relate to each other.
In 2026 there are mainly three modern layout systems you should know (in order of learning priority):
- Normal Flow + Block vs Inline (the default behavior — you must understand this first)
- Flexbox (1-dimensional layout — rows OR columns — most used day-to-day)
- Grid (2-dimensional layout — rows AND columns — perfect for page structure)
We will go very detailed, step by step, like I’m teaching you offline with a whiteboard.
1. Normal Flow – The Default Layout (You Must Master This First)
When you write HTML without any CSS layout tricks, the browser uses normal flow (also called block formatting context).
Rules of normal flow:
| Display value (default) | Behavior | Takes full width? | New line? | Examples |
|---|---|---|---|---|
| block | Starts on new line, takes full available width | Yes | Yes | <div>, <p>, <h1>–<h6>, <section>, <article>, <header>, <footer> |
| inline | Flows inside line, only as wide as content | No | No | <span>, <a>, <strong>, <em>, <img> (default) |
| inline-block | Like inline but respects width/height/padding | No | No | <img>, <button> (often set manually) |
Quick test — copy this HTML:
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="normal-flow-demo"> <div class="block">I am block → new line + full width</div> <span class="inline">I am inline → stays in line</span> <span class="inline">Me too!</span> <img src="https://images.unsplash.com/photo-1516321310764-9f3c9619d7d7?w=100" alt="small image" class="inline"> <div class="block">Another block → new line again</div> </div> |
CSS
|
0 1 2 3 4 5 6 7 |
.block { background: #e0f2fe; padding: 15px; margin: 10px 0; } .inline { background: #fef3c7; padding: 8px 12px; } |
Result: blocks stack vertically, inline elements stay side-by-side like words in a sentence.
2. Flexbox – The Hero of Everyday Layout (Most Important to Learn First)
Flexbox is perfect when you want to arrange items in one direction (row or column) and want powerful alignment & distribution control.
Golden parent rule:
CSS
|
0 1 2 3 4 5 6 7 8 9 |
.parent { display: flex; /* or */ display: inline-flex; } |
Most useful flex properties (put on parent):
| Property | Common values | What it does |
|---|---|---|
| flex-direction | row (default), column, row-reverse | Main axis direction |
| justify-content | flex-start, center, space-between, space-around, space-evenly | Distributes space on main axis |
| align-items | stretch (default), center, flex-start, flex-end, baseline | Aligns items on cross axis |
| gap | 20px, 2rem, 1em 2em | Space between items (replaces margin hacks) |
| flex-wrap | nowrap (default), wrap, wrap-reverse | Allow items to wrap to next line |
Most useful on child items:
- flex: 1 or flex: 0 1 auto → grow & shrink
- flex-grow, flex-shrink, flex-basis
- align-self → override parent align-items for one child
3. Real Layout Example – Hero + Cards + Footer (Flexbox + Normal Flow)
index.html
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML & CSS Layout – Webliance</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- Header with Flexbox navigation --> <header class="site-header"> <div class="container"> <a href="#" class="logo">Webliance</a> <nav class="main-nav"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#projects">Projects</a> <a href="#contact">Contact</a> </nav> </div> </header> <!-- Hero section – centered content with Flexbox --> <section class="hero"> <div class="container hero-content"> <h1>Learn Layout the Right Way</h1> <p>Hyderabad 2026 – Flexbox + Grid = Modern websites</p> <a href="#cards" class="btn">See Examples ↓</a> </div> </section> <!-- Cards – Flexbox grid --> <section id="cards" class="cards-section"> <div class="container"> <h2>Featured Cards (Flexbox)</h2> <div class="cards-container"> <div class="card"> <h3>Card One</h3> <p>Uses flexbox parent to align content vertically and horizontally.</p> </div> <div class="card"> <h3>Card Two</h3> <p>Grows and shrinks nicely when window resizes.</p> </div> <div class="card"> <h3>Card Three</h3> <p>Wraps to new row on smaller screens automatically.</p> </div> </div> </div> </section> <!-- Footer – simple centered block --> <footer> <div class="container"> <p>© 2026 Webliance • Made with Chai & Flexbox</p> </div> </footer> </body> </html> |
style.css
CSS
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 |
/* Reset + box model */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: system-ui, sans-serif; line-height: 1.6; background: #f8fafc; color: #1e293b; } /* Container helper */ .container { max-width: 1100px; margin: 0 auto; padding: 0 20px; } /* Header – Flexbox for logo + nav */ .site-header { background: #1e40af; color: white; padding: 1.5rem 0; } .site-header .container { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 2rem; font-weight: bold; color: white; text-decoration: none; } .main-nav { display: flex; gap: 2.5rem; } .main-nav a { color: white; text-decoration: none; font-weight: 500; } /* Hero – Flexbox centering */ .hero { background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: white; text-align: center; padding: 10rem 0 8rem; } .hero-content { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; } .hero h1 { font-size: 4.5rem; } .btn { display: inline-block; background: white; color: #1e40af; padding: 1rem 2.5rem; border-radius: 50px; text-decoration: none; font-weight: bold; } /* Cards – Flexbox layout */ .cards-section { padding: 6rem 0; } .cards-container { display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: center; } .card { flex: 1 1 300px; /* grow, shrink, basis */ background: white; border-radius: 12px; padding: 2.5rem; box-shadow: 0 6px 20px rgba(0,0,0,0.08); text-align: center; } .card h3 { margin-bottom: 1rem; color: #1d4ed8; } /* Footer */ footer { background: #0f172a; color: #94a3b8; text-align: center; padding: 3rem 0; } |
What You Should See & Play With
- Header: logo left, nav right → justify-content: space-between
- Hero: everything perfectly centered vertically & horizontally → flex-direction: column + align-items: center
- Cards: 3 cards side-by-side on desktop → wrap to new row on mobile → flex-wrap: wrap + flex: 1 1 300px
- Resize browser window → watch cards adapt automatically
Quick Layout Mastery Path (2026 Order)
- Master normal flow + block vs inline vs inline-block
- Master Flexbox (95% of day-to-day layouts)
- Learn CSS Grid (for full-page layouts, dashboards, galleries)
- Media queries → make everything responsive
- Position (relative/absolute/fixed/sticky) — use only when Flex/Grid can’t solve
How does the page behave when you make the browser narrow? Cards stacking nicely? Header still readable?
Next steps — tell me what you want next:
- “Flexbox deep dive with 10 real examples”
- “CSS Grid crash course”
- “Make this layout fully responsive with media queries”
- “Positioning – relative vs absolute vs fixed”
- “Common layout bugs & how to fix them”
You’re now entering the real power zone of CSS. Chai khatam? Fresh cup lao — let’s keep building! 🚀 😄
