CSS Layout Templates
We have created some responsive starter templates with CSS.
You are free to modify, save, share, and use them in all your projects.
1. Header, equal columns and footer:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Style the header */
.header {
background-color: #f1f1f1;
padding: 30px;
text-align: center;
font-size: 35px;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Style the footer */
.footer {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to
each other */
@media (max-width: 600px) {
.column {
width: 100%;
}
}
</style>
</head>
<body>
<h2>CSS Template using Float</h2>
<p>In this example, we have created a header, three equal columns and a footer. On smaller
screens, the columns will stack on top of each other.</p>
<p>Resize the browser window to see the responsive effect.</p>
<div class="header">
<h2>Header</h2>
</div>
<div class="row">
<div class="column" style="background-color:#aaa;">Column</div>
<div class="column" style="background-color:#bbb;">Column</div>
<div class="column" style="background-color:#ccc;">Column</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
Output:
2. Header, unequal columns and footer:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Style the header */
.header {
background-color: #f1f1f1;
padding: 30px;
text-align: center;
font-size: 35px;
}
/* Container for flexboxes */
.row {
display: -webkit-flex;
display: flex;
}
/* Create three unequal columns that sits next to each other */
.column {
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}
/* Left and right column */
.[Link] {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
/* Middle column */
.[Link] {
-webkit-flex: 2;
-ms-flex: 2;
flex: 2;
}
/* Style the footer */
.footer {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}
/* Responsive layout - makes the three columns stack on top of each other instead of
next to each other */
@media (max-width: 600px) {
.row {
-webkit-flex-direction: column;
flex-direction: column;
}
}
</style>
</head>
<body>
<h2>CSS Template using Flexbox</h2>
<p>In this example, we have created a header, three unequal columns and a footer. On
smaller screens, the columns will stack on top of each other. Resize the browser window
to see the responsive effect.</p>
<p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 and earlier
versions.</p>
<div class="header">
<h2>Header</h2>
</div>
<div class="row">
<div class="column side" style="background-color:#aaa;">Column</div>
<div class="column middle" style="background-color:#bbb;">Column</div>
<div class="column side" style="background-color:#ccc;">Column</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
Output:
3. Topnav, content, footer:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Style the content */
.content {
background-color: #ddd;
padding: 10px;
height: 200px; /* Should be removed. Only for demonstration */
}
/* Style the footer */
.footer {
background-color: #f1f1f1;
padding: 10px;
}
</style>
</head>
<body>
<div class="topnav">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<div class="content">
<h2>CSS Template</h2>
<p>A topnav, content and a footer.</p>
</div>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
Output:
4. Sidenav, content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sidebar with Content</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body, html {
font-family: Arial, sans-serif;
height: 100%;
}
.container {
display: flex;
height: 100vh;
}
.sidebar {
width: 220px;
background-color: #2c3e50;
color: white;
padding: 20px;
}
.sidebar h2 {
margin-bottom: 20px;
}
.sidebar ul {
list-style: none;
}
.sidebar ul li {
margin-bottom: 15px;
}
.sidebar ul li a {
color: white;
text-decoration: none;
font-size: 16px;
display: block;
padding: 8px;
border-radius: 4px;
}
.sidebar ul li a:hover {
background-color: #34495e;
}
.content {
flex: 1;
padding: 40px;
background-color: #f4f4f4;
}
</style>
</head>
<body>
<div class="container">
<nav class="sidebar">
<h2>My Menu</h2>
<ul>
<li><a href="#">🏠 Home</a></li>
<li><a href="#">📄 About</a></li>
<li><a href="#">📞 Contact</a></li>
<li><a href="#">⚙️Settings</a></li>
</ul>
</nav>
<main class="content">
<h1>Welcome!</h1>
<p>This is the main content area. Select links from the sidebar to explore more.</p>
</main>
</div>
</body>
</html>
Output:
The flex: 1 rule on the .content class is shorthand for:
css
CopyEdit
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
Let’s break it down:
🔹 Why flex: 1?
It tells the .content area to take up all the remaining space after the sidebar takes its fixed
width (220px in this case).
● flex: 0 → It wouldn't grow, so it’d shrink to zero width if allowed.
● flex: 2 → It would take twice as much space compared to other siblings with
flex: 1.
But in this layout:
● The sidebar has a fixed width, not flexible.
● The content area is the only flexible element, so flex: 1 simply tells it to "take up the
rest".
🧠 What if you did flex: 2?
Nothing would change visually unless the sidebar was also flexible. If both had flex values:
css
CopyEdit
.sidebar { flex: 1; }
.content { flex: 2; }
Then the layout would distribute space in a 1:2 ratio.
✅ Summary:
● flex: 1 = take all the available space.
● It's used here because the content area needs to stretch while the sidebar stays fixed.