Search⌘ K
AI Features
Home
Courses
Build Amazing Layouts with HTML5, CSS3, and Bootstrap 4

Simple Flexbox-Based Non-Responsive Website Layout

Explore building a simple non-responsive website layout using Flexbox. Learn to structure the HTML with header, aside, main, and footer sections, then apply Flexbox CSS styles to arrange and stretch elements effectively.

We'll cover the following...

Let’s understand the layout from the previous lesson by rebuilding it step by step.

Step 1: Give our site some structure

To begin with, we’ll have one <div> inside the <body> element, with three top-level sections:

  • Header
  • Container for the aside and main area
  • Footer

The structure will look like this:

HTML
<div>
  <header>This is the header.</header>
  <div>
    <aside>This is the sidebar</aside>
    <main>This is the main content area.</main>
  </div>
  <footer>This is the footer</footer>
</div>

As we can see, the HTML structure is exactly the same as the one in the “Mockup” chapter; the only difference is that we’re now nesting the <aside> and <main> tags inside a wrapping <div> element.

Here’s the output of step 1: ...