HTML Layout

Page layout combines semantic HTML for structure with CSS for positioning. Modern layouts are built using Flexbox and CSS Grid, with responsive behavior from media queries.

<header> <nav> <main> <aside> <footer> display:flex display:grid @media

1) Semantic Page Skeleton


<header>Logo + Navigation</header>
<main>
  <article>Content</article>
  <aside>Sidebar</aside>
</main>
<footer>Footer info</footer>
Header
Main / Article content
Footer

2) Two-Column Layout with Flexbox


/* CSS */
.layout{display:flex;gap:12px}
.layout main{flex:1}
.layout aside{width:250px}

/* Mobile: stack vertically */
@media (max-width: 768px){
  .layout{flex-direction:column}
  .layout aside{width:auto}
}
Main (flex:1)

3) Three-Column Layout with CSS Grid


/* CSS */
.grid3{
  display:grid;
  grid-template-columns:1fr 2fr 1fr;
  gap:12px;
}
@media (max-width: 768px){
  .grid3{grid-template-columns:1fr}
}
Left
Main (2fr)
Right

4) “Holy Grail” Layout (Header + 3 columns + Footer)


<div class="holy">
  <header>Header</header>
  <aside class="left">Left</aside>
  <main>Main content</main>
  <aside class="right">Right</aside>
  <footer>Footer</footer>
</div>
Header
Main content
Footer

5) Sticky Header (Inside Scrollable Area)


/* The header sticks to the top when scrolling */
.scroll-area{height:220px;overflow:auto}
.scroll-area header{position:sticky;top:0;background:#fff}
Sticky Header
Row 1 — content…
Row 2 — content…
Row 3 — content…
Row 4 — content…
Row 5 — content…
Row 6 — content…
Row 7 — content…
Row 8 — content…
Row 9 — content…
Row 10 — content…
Row 11 — content…
Row 12 — content…

6) Centered Fixed-Width vs Fluid


/* Fixed-width, centered */
.container-fixed{max-width:960px;margin:0 auto}

/* Fluid takes full width */
.container-fluid-demo{padding:0 12px}
Centered fixed-width area (max-width:960px)
Fluid area (stretches to parent width)

7) Quick Responsive Media Query


@media (max-width: 576px){
  .hide-xs{display:none}
  .stack-xs{display:block}
}

Tips:

  • Use semantic elements for structure; let CSS (Flex/Grid) handle positioning.
  • Start mobile-first: write base styles for small screens, then add wider breakpoints.
  • Prefer CSS Grid for two-dimensional layouts; Flexbox for one-direction flows (rows/columns).
  • Keep layout CSS in your site stylesheet; inline styles here are only for demo.