HTML Basic 3 Column Layout using Flexbox

Posted on In

A simple HTML layout with a header, main content area, and footer using CSS for styling.

HTML Structure

1
2
3
4
5
6
7
8
9
10
<div class="container">
  <header class="header">
    <nav>Navigation</nav>
  </header>
  <main class="main">
    <aside class="aside">Aside</aside>
    <article class="content">Content</article>
  </main>
  <footer class="footer">Footer</footer>
</div>

3 Column Layout using Flexbox

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
* {
  padding: 0;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column; /* Stack children vertically */
  min-height: 100vh;
}

.header {
  background-color: #b7b1f2; /* Blue */
  height: 60px;
}

.main {
  flex: 1; /* Take up remaining space */
  display: flex; /* Enable flexbox for main content */
}

.aside {
  width: 150px; /* Fixed width for aside */
  background-color: #fdb7ea;
}

.content {
  flex: 1; /* Take up remaining space in main */
  background-color: #ffdccc;
}

.footer {
  height: 60px;
  background-color: #fbf3b9; /* Purple */
}

Here container is the main wrapper of the layout. It uses column flexbox to stack the header, main content, and footer vertically.

The main content area is also a flex container that allows the aside and content sections to be displayed side by side.

Responsive Design

To make the layout responsive, you can use media queries to adjust the styles based on the screen size. For example, you can stack the aside and content sections vertically on smaller screens:

1
2
3
4
5
6
7
8
9
@media (max-width: 768px) {
  .main {
    flex-direction: column; /* Stack aside and content vertically */
  }
  
  .aside {
    width: 100%; /* Full width for aside on small screens */
  }
}

Here’s a live example of the layout: