❮ Previous

CSS Website Layout

  • Learn CSS layout techniques to structure websites using Flexbox, Grid, and responsive design.

  • What is a Website Layout ?

    A website layout is the overall structure of a webpage — how different sections are arranged and displayed on the screen.

    In simple words

    A layout is the skeleton of a website, and CSS gives shape, position, and spacing to that skeleton.Almost every modern website follows a standard layout pattern, so learning this is essential.

    Why Website Layout is Important ?

    Without a Proper Layout

    • Content looks scattered
    • Users feel confused
    • Navigation becomes difficult
    • Website looks unprofessional

    With a Good Layout

    • Easy navigation
    • Better readability
    • Clean & professional design
    • Improved user experience

    Real-life example:
    A shopping mall
    If entrances, signs, and sections are poorly arranged, people get lost quickly.

    Common Website Layout Structure

    Most websites follow this basic structure:

    Header → Navigation → Main Content → Footer

    These sections are usually built using semantic HTML tags and styled using CSS.

    Header 

    What is a Header ?

    The header is the top section of the website.

    It usually contains:
    • Website logo
    • Website title
    • Search bar
    • Login / signup buttons

    In simple words

    The header introduces the website.

    Real-life example:
    A shop signboard - it tells you where you are.


Website Header (Basic Structure & Styling)

Creates a simple website header section with a background color, centered text, and proper spacing. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Header Example</title>
  <style>
    .header {
      background-color: #1a73e8;
      color: white;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <header class="header">
    <h1>My Website</h1>
  </header>
</body>
</html>

  • Visually strong
    Clear identity
    Easy to notice

    Navigation

    What is Navigation ?

    Navigation helps users move between pages or sections.

    Common items include:
    • Home
    • About
    • Services
    • Contact

    In simple words

    Navigation is the roadmap of the website.

    Real-life example:
    Road signboards that guide you where to go.

Navigation

Creates a horizontal navigation menu using Flexbox with centered links and spacing between items. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Navigation Example</title>
  <style>
    .nav {
      display: flex;
      justify-content: center;
      gap: 20px;
      background-color: #333;
      padding: 10px;
    }

    .nav a {
      color: white;
      text-decoration: none;
      font-size: 16px;
    }

    .nav a:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>
</body>
</html>

  • Clean horizontal menu
    Easy navigation
    User-friendly

    Main Content 

    What is Main Content ?

    The main section contains the actual content of the page, such as:
    • Articles
    • Products
    • Forms
    • Images
    • Videos

    In simple words

    Main is the heart of the website.

    Real-life example:
    The movie screen inside a cinema - this is where the main action happens.

Main Content Section

Creates a main content section with proper spacing and minimum height to hold the primary content of the webpage. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Main Content Example</title>
  <style>
    .main {
      padding: 20px;
      min-height: 300px;
      background-color: #f4f4f4;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <main class="main">
    <h2>Welcome</h2>
    <p>This is the main content area.</p>
  </main>
</body>
</html>

  • Comfortable spacing
    Clear focus
    Content-friendly area

    Footer 

    What is a Footer ?

    The footer is the bottom section of a website.

    It usually contains:
    • Copyright information
    • Contact details
    • Social media links
    • Policies

    In simple words

    Footer closes the website politely.

    Real-life example:
    End credits of a movie

Website Footer (Bottom Section)

Creates a simple footer section with centered text, dark background, and comfortable spacing at the bottom of the webpage. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Footer Example</title>
  <style>
    .footer {
      background-color: #222;
      color: white;
      text-align: center;
      padding: 15px;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <footer class="footer">
    <p>© 2026 My Website</p>
  </footer>
</body>
</html>
  • Professional ending
    Clean design
    Trust-building section

Complete Website Layout (Header, Navigation, Main & Footer)

Creates a complete basic website layout with a styled header, horizontal navigation, main content area, and footer using clean HTML and CSS. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Complete Website Layout</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }

    .header {
      background-color: #1a73e8;
      color: white;
      padding: 20px;
      text-align: center;
    }

    .nav {
      display: flex;
      justify-content: center;
      gap: 20px;
      background-color: #333;
      padding: 10px;
    }

    .nav a {
      color: white;
      text-decoration: none;
    }

    .nav a:hover {
      text-decoration: underline;
    }

    .main {
      padding: 20px;
      min-height: 300px;
    }

    .footer {
      background-color: #222;
      color: white;
      text-align: center;
      padding: 15px;
    }
  </style>
</head>
<body>
  <header class="header">
    <h1>My Website</h1>
  </header>

  <nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
  </nav>

  <main class="main">
    <h2>Main Content</h2>
    <p>This is where your page content goes.</p>
  </main>

  <footer class="footer">
    <p>© 2026 My Website</p>
  </footer>
</body>
</html>

  • Clean structure
    Easy navigation
    Responsive-ready
    Industry-standard design

    Common Mistakes

    Using only <div> for everything
    No spacing between sections
    Mixing navigation with header content
    Ignoring footer completely

    Best Practices for Website Layout

    Use semantic tags (header, nav, main, footer)
    Keep layout simple & readable
    Use Flexbox/Grid for alignment
    Maintain consistent spacing
    Design from the user’s perspective

    Header → identity
    Navigation → direction
    Main → content
    Footer → closure

    Website layout defines page structure
    Header, Navigation, Main & Footer are core sections
    CSS controls spacing, alignment & appearance
    Clean layout improves usability
    Fundamental skill for every web developer

❮ Previous