• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

CSS Website Layout

← Previous Next →

🔹 What is a CSS Website Layout?

A CSS website layout defines the visual structure and organization of a webpage. It determines how headers, navigation bars, sidebars, content areas, and footers are positioned and styled.

You can build layouts using techniques such as:

  • CSS Flexbox

  • CSS Grid

  • float and clear

  • Positioning (relative, absolute, etc.)

  • Multi-column layouts

🔸 Common Layout Components

  1. Header – Top bar with logo or site name

  2. Navigation (Nav) – Menu links

  3. Main Content – Central section for page content

  4. Sidebar – Optional for ads, links, or tools

  5. Footer – Bottom section with copyright/info

🔸 Layout Methods

✅ 1. Flexbox Layout
.container {
  display: flex;
}
.sidebar {
  width: 25%;
}
.content {
  width: 75%;
}

Use Flexbox for 1D layouts (row or column).

✅ 2. Grid Layout
.container {
  display: grid;
  grid-template-columns: 25% 75%;
}

Use Grid for 2D layouts — rows and columns.

✅ 3. Float-Based Layout
.sidebar {
  float: left;
  width: 25%;
}
.content {
  float: left;
  width: 75%;
}

Floats are older technique, still useful sometimes.

✅ 4. Position-Based Layout
.header {
  position: fixed;
  top: 0;
  width: 100%;
}

Used for sticky headers, footers, etc.

✅ 5. Multi-Column Layout
.columns {
  column-count: 3;
  column-gap: 20px;
}

Useful for text-heavy pages like blogs.

Practice Questions

Q1. Create a basic two-column layout using Flexbox.

Q2. Build a 3-column layout with Grid (left, center, right).

Q3. Create a header and footer with fixed width.

Q4. Make a responsive sidebar that collapses on small screens.

Q5. Float an image to the right of the content block.

Q6. Create a sticky header that stays at the top on scroll.

Q7. Design a footer that sticks to the bottom of the page.

Q8. Create equal-height columns using Flexbox.

Q9. Build a centered layout with max width of 1200px.

Q10. Use column-count to split text into 2 columns.

← Previous Next →

CSS

online coding class codepractice

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

codepractice logo
Login
Go Back Top