CSS Website Layout

by CodeCapsule

CSS Website Layout

Website layout means arranging parts of a webpage such as:

Header
Navigation bar
Main content
Sidebar
Footer

Modern CSS provides many layout methods:

Block layout
Flexbox
CSS Grid
Float layout (old)
Positioning layout

Below are the most important ones.

1. Basic Block Layout

Every block element (like <div>, <section>) stacks vertically.

2. Float Layout (Old Method)

✔ Old method for sidebars
✖ Now replaced by Flexbox/Grid

3. Flexbox Layout (Best for simple layouts)

HTML:

CSS:

✔ Easy 2-column or 3-column layouts
✔ Responsive
✔ Centering is easy

4. CSS Grid Layout (Best for complex layouts)

HTML:

CSS:

.grid-container {
display: grid;
grid-template-areas:
"header header"
"nav main"
"aside main"
"footer footer";
grid-template-columns: 1fr 3fr;
gap: 10px;
}

header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }

.grid-container {

display: grid;

grid-template-areas:

"header header"

"nav main"

"aside main"

"footer footer";

grid-template-columns: 1fr 3fr;

gap: 10px;

}

header { grid-area: header; }

nav { grid-area: nav; }

main { grid-area: main; }

aside { grid-area: aside; }

footer { grid-area: footer; }

✔ Powerful
✔ Organised
✔ Great for whole page layout

5. Fixed Layout (Using position: fixed)

✔ Navbar stays on screen when scrolling

6. Responsive Layout (Using media queries)

✔ Stack items vertically on small screens

Full Example (Modern Flexbox Page Layout)

header, footer {
background: #333;
color: white;
padding: 20px;
text-align: center;
}

.container {
display: flex;
gap: 20px;
}

.sidebar {
width: 25%;
background: #eee;
padding: 20px;
}

.main {
flex: 1;
background: #fafafa;
padding: 20px;
}

header, footer {

background: #333;

color: white;

padding: 20px;

text-align: center;

}

.container {

display: flex;

gap: 20px;

}

.sidebar {

width: 25%;

background: #eee;

padding: 20px;

}

.main {

flex: 1;

background: #fafafa;

padding: 20px;

}

Summary

Layout Method	Best For
Block	Simple stacking
Float	Old 2-column layouts
Flexbox	Modern, simple page layout
Grid	Complex, full-page layout
Position	Fixed or sticky items

CodeCapsule

Sanjit Sinha — Web Developer | PHP • Laravel • CodeIgniter • MySQL • Bootstrap Founder, CodeCapsule — Student projects & practical coding guides. Email: info@codecapsule.in • Website: CodeCapsule.in

CSS Website Layout

CSS Website Layout

1. Basic Block Layout

2. Float Layout (Old Method)

3. Flexbox Layout (Best for simple layouts)

HTML:

CSS:

4. CSS Grid Layout (Best for complex layouts)

HTML:

CSS:

5. Fixed Layout (Using position: fixed)

6. Responsive Layout (Using media queries)

Full Example (Modern Flexbox Page Layout)

Summary

You may also like...

Leave a Reply Cancel reply

CSS Website Layout

CSS Website Layout

1. Basic Block Layout

2. Float Layout (Old Method)

3. Flexbox Layout (Best for simple layouts)

HTML:

CSS:

4. CSS Grid Layout (Best for complex layouts)

HTML:

CSS:

5. Fixed Layout (Using position: fixed)

6. Responsive Layout (Using media queries)

Full Example (Modern Flexbox Page Layout)

Summary

You may also like...

CSS Accessibility Styling

CSS Performance Optimization

Leave a Reply Cancel reply