CSS Website Layout
A website layout assembles standard regions like the header, navigation, main content, sidebar, and footer into one coherent page structure.
Most sites share the same building blocks. Marking them up with semantic elements and then arranging them with modern layout tools keeps your HTML readable and your CSS predictable.
The Common Regions
- header - the top band, often with a logo and title
- nav - the primary set of links
- main - the unique content of the page
- aside - a sidebar for secondary information
- footer - closing links, credits, and contact details
A Header And Navigation Bar
Flexbox navigation
<!DOCTYPE html>
<html>
<head>
<style>
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px;
}
</style>
</head>
<body>
<header>
<div class="logo">Site</div>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</header>
</body>
</html>Content Beside A Sidebar
Two-column body with grid
<!DOCTYPE html>
<html>
<head>
<style>
.page {
display: grid;
grid-template-columns: 1fr 260px;
gap: 24px;
}
</style>
</head>
<body>
<div class="page">
<main>Main content</main>
<aside>Sidebar</aside>
</div>
</body>
</html>Grid handles the overall page skeleton well because it works in two dimensions at once. For a single row or column of items inside a region, flexbox is usually simpler.
A Sticky Footer Layout
Footer pinned to the bottom on short pages
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
</style>
</head>
<body>
<main>
<p>Page content that stretches to fill available space.</p>
</main>
<footer>Site footer</footer>
</body>
</html>Note: Build the layout for narrow screens first, then use media queries to introduce multiple columns as space allows.
Exercise: CSS Website Layout
What's the key difference between position: fixed and position: sticky on a page header?
