CSS layout and dividers

Now that we understand how the box model works, we can try to build a simple layout for our HTML page, as shown in the following diagram:

Our layout will have a container with a sidebar on the right, and at the bottom a footer. A very basic layout for a lot of websites.

 This layout will be inside a container that will be centered on the page. Without further ado, let's get started!

The basic layout

To create our basic layout, we will use the <div> element. The <div> element is the most commonly used HTML element. <div> stands for divide, and we simply use it to divide our page into sections by creating boxes where we put our contents.

 Let's clear our CSS in your <style> section and start from scratch.

 We'll start first by adding a <div> element to wrap all the content we've created, and then add a class container to it:

   <div class="container">
     <h1 id="my-name">John Doe</h1>
     <p class="text">I'm an <b...