Build Amazing Layouts with HTML5, CSS3, and Bootstrap 4/

...

/

Simple Flexbox-Based Non-Responsive Website Layout

Simple Flexbox-Based Non-Responsive Website Layout

Learn to use the flexbox-based non-responsive layout.

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:

Press + to interact
<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: ...

Access this course and 1400+ top-rated courses and projects.