Accessible 3 Column Website Layout using Flexbox / HTML 5

Last Updated:

Introduction

This updated HTML5 and CSS3 tutorial will provide you with the foundational knowledge needed to create a fixed-width 3-column website using Flexbox. We’ll supply you with the HTML5 and CSS3 code for the layout and explain each section throughout the tutorial. This guide is aimed at beginner web designers who want to build an accessible website, learn how it all works, and understand the underlying principles.

The Code:

HTML using Flexbox:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3 Column Layout Example</title>
    <link rel="stylesheet" href="/styles.css">
</head>
<body>
    <div id="wrapper">
        <header id="header"></header>
        <div id="container">
            <div class="column" id="leftCol"></div>
            <div class="column" id="midCol"></div>
            <div class="column" id="rightCol"></div>
        </div>
        <footer id="footer"></footer>
    </div>
</body>
</html>

CSS using Flexbox (style.css) :

#wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: red;
    padding: 1em;
}

#header, #container, #footer {
    width: 100%;
    padding: 1em;
}

#header {
    background-color: blue;
}

#container {
    display: flex;
    justify-content: space-between;
    background-color: green;
}

.column {
    flex: 1;
    padding: 1em;
    background-color: transparent; /* Updated background color */
}

#leftCol {
    background-color: orange;
}

#midCol {
    background-color: yellow;
}

#rightCol {
    background-color: purple;
}

#footer {
    background-color: black;
}

/* Additional styles for responsiveness */
@media (max-width: 768px) {
    #wrapper {
        padding: 0.5em;
    }
    .column {
        padding: 0.5em;
    }
}

Explaining the Code:

  1. HTML with Flexbox:
    • We’ve replaced the id attributes with semantic HTML5 elements (header, footer) and used the .column class for the three columns within the #container.
  2. CSS with Flexbox:
    • display: flex; is applied to #wrapper, turning it into a flex container with a vertical (column) layout.
    • flex-direction: column; arranges the children of #wrapper in a column layout.
    • align-items: center; centers the content horizontally within #wrapper.
    • display: flex; and justify-content: space-between; are used in #container to create a horizontal flex container with space between columns.
    • .column elements have flex: 1;, which allows them to grow and fill the available space evenly.
    • Background colors have been updated, and padding adjustments have been made for better aesthetics.
    • We’ve added a media query for responsiveness, reducing padding on smaller screens.
  3. Checking Validity and Accessibility:
  4. Useful Tools and Browser Extensions:
    • For web development, you can use the following tools and extensions:
      • Web Developer Extension – Available for Firefox, Chrome, and Edge, this extension provides a wide range of web development tools.
      • Firefox Developer Tools – Built-in tools in Firefox for debugging and web development.
      • Additionally, consider using VS Code as your code editor with extensions like Live Server for a smooth development experience.

For more information on CSS read our CSS Styling Guide for Beginners.