CommonLounge Archive

Creating Layouts

June 22, 2017

In this lesson, you’ll learn:

  • How HTML elements fit in a page
  • How to create layouts with two or more columns
  • How to solve common layout problems

The Nature of HTML Elements

You already know that most HTML elements are block elements that expand to fill the width of their container.

That means that before styling, most HTML elements are stacked on top of each other from the top to bottom of a web page.

But most websites we see have a sidebar or other content that sits to the side of the main content. We can do this by repositioning the elements to arrange them across the page.

Let’s look at how we can move elements around the page to create basic layouts.

Creating a Layout with Floats

There are two ways to create a basic layout by moving elements around the page. One is by floating elements in the page.

To float an element means that you remove it from the flow of the document and let it rest above everything. If you float two block elements you can stack them side by side.

To float an element, give it a float property with a value of either left or right and a width.

.float-me {
  float: left;
  width: 100px;
}

One common use of floats is to make text wrap around an image. This is done by floating an image within a block of text.

An image and text before floating.

An image and text when the image is floated left.

Before we run code for this tutorial, note that different browsers have different defaults. Thus, depending on your browser version, your code output may not look exactly the same as screenshots. This is nothing to worry about. :)

Let’s look at an easy example of using floats to create a layout.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body {
      color: #fff;
    }
    header {
      background-color: #f1c40f;
      box-sizing: border-box;
      margin-bottom: 10px;
      padding: 10px;
    }
    .main-content {
      margin-bottom: 10px;
    }
    main {
      float: left;
      width: 70%;
      background-color: #2ecc71;
      box-sizing: border-box;
      padding: 10px;
    }
    aside {
      float: right;
      width: 30%;
      background-color: #9b59b6;
      box-sizing: border-box;
      padding: 10px;
    }
    footer {
      background-color: #f39c12;
      box-sizing: border-box;
      padding: 10px;
    }
  </style>
</head>
<body>
  <header>My Site</header>
  <div class="main-content">
    <main>
      This is for my main content. This is for my main content. This is for my main content. This is for my main content.
    </main>
    <aside>
      Welcome to my blog! This is my sidebar.
    </aside>
  </div>
  <footer>Copyright Commonlounge. All Rights Reserved.</footer>
</body>
</html>

By floating the main left and the aside right, we can create a simple two-column layout. But if we view this in the browser, you’ll see a problem:

The footer is hiding behind the main and aside elements.

This is because when you float elements, they lift up above the other elements and no longer take up any space.

When this happens, you must add something called a clearfix to the element that is surrounding the floating elements.

In this case, the element that contains the main and aside elements is a div with the class name main-content. We need to apply a clearfix to this element to make the footer go to its normal place.

To add a clearfix, first copy and paste this code into your CSS.

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

Now, add the class clearfix to the div that contains the floating elements.

<header>My Site</header>
<div class="main-content clearfix">
  <main>
    This is for my main content. This is for my main content. This is for my main content. This is for my main content.
  </main>
  <aside>
    Welcome to my blog! This is my sidebar.
  </aside>
</div>
<footer>Copyright Commonlounge. All Rights Reserved.</footer>

Here’s the clear fix in action:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body {
      color: #fff;
    }
    header {
      background-color: #f1c40f;
      box-sizing: border-box;
      margin-bottom: 10px;
      padding: 10px;
    }
    .main-content {
      margin-bottom: 10px;
    }
    main {
       float: left;
      width: 70%;
      background-color: #2ecc71;
      box-sizing: border-box;
      padding: 10px;
    }
    aside {
      float: right;
      width: 30%;
      background-color: #9b59b6;
      box-sizing: border-box;
      padding: 10px;
    }
    footer {
      background-color: #f39c12;
      box-sizing: border-box;
      padding: 10px;
    }
    .clearfix:after {
      content: "";
      display: table;
      clear: both;
    }
  </style>
</head>
<body>
  <header>My Site</header>
  <div class="main-content clearfix">
    <main>
      This is for my main content. This is for my main content. This is for my main content. This is for my main content.
    </main>
    <aside>
      Welcome to my blog! This is my sidebar.
    </aside>
  </div>
  <footer>Copyright Commonlounge. All Rights Reserved.</footer>
</body>
</html>

Result:

Now the layout displays correctly.


Learn more about floats and how to use them at CSS Tricks.

Creating a Layout with Inline-Block

Floating elements often cause problems for a layout. That’s why many people create layouts using inline-block instead.

Let’s use the same HTML from the previous example and style it with inline-block:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body {
      color: #fff;
    }
    header {
      background-color: #f1c40f;
      box-sizing: border-box;
      margin-bottom: 10px;
      padding: 10px;
    }
    .main-content {
      margin-bottom: 10px;
    }
    main {
      display: inline-block;
      width: 70%;
      background-color: #2ecc71;
      box-sizing: border-box;
      padding: 10px;
    }
    aside {
      display: inline-block;
      width: 30%;
      background-color: #9b59b6;
      box-sizing: border-box;
      padding: 10px;
    }
    footer {
      background-color: #f39c12;
      box-sizing: border-box;
      padding: 10px;
    }
  </style>
</head>
<body>
  <header>My Site</header>
  <div class="main-content">
    <main>
      This is for my main content. This is for my main content. This is for my main content. This is for my main content.
    </main>
    <aside>
      Welcome to my blog! This is my sidebar.
    </aside>
  </div>
  <footer>Copyright Commonlounge. All Rights Reserved.</footer>
</body>
</html>

If you view this code in the browser, you’ll see that it’s broken. The aside doesn’t fit next to the main and is falling into the next line:

This is caused by a small space between the two elements in our HTML document.

Since the main and aside elements are on separate lines in the HTML, there is a single space character between them. And since the elements are at 70% and 30% width, there’s no room for any other space between them.

When the tiny space shows up between the main and the aside, the remaining space becomes too small, and the aside falls to the next line. We need to remove the space to fix the layout.

The simplest way to remove this space is to add an empty comment between the elements. It looks like this.

<main>
  This is for my main content. This is for my main content. This is for my main content. This is for my main content.
</main><!--
--><aside>
  Welcome to my blog! This is my sidebar.
</aside>

This comment makes sure that any space between the elements doesn’t show up in the browser. This fixes the layout.

If you add the comment as written above, the layout will display correctly:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body {
      color: #fff;
    }
    header {
      background-color: #f1c40f;
      box-sizing: border-box;
      margin-bottom: 10px;
      padding: 10px;
    }
    .main-content {
      margin-bottom: 10px;
    }
    main {
      display: inline-block;
      width: 70%;
      background-color: #2ecc71;
      box-sizing: border-box;
      padding: 10px;
    }
    aside {
      display: inline-block;
      width: 30%;
      background-color: #9b59b6;
      box-sizing: border-box;
      padding: 10px;
    }
    footer {
      background-color: #f39c12;
      box-sizing: border-box;
      padding: 10px;
    }
  </style>
</head>
<body>
  <header>My Site</header>
  <div class="main-content">
    <main>
      This is for my main content. This is for my main content. This is for my main content. This is for my main content.
    </main><!--
--><aside>
      Welcome to my blog! This is my sidebar.
    </aside>
  </div>
  <footer>Copyright Commonlounge. All Rights Reserved.</footer>
</body>
</html>

Note: You may notice that the two inline-block elements are not the same size and are aligned at the bottom. Most layouts are aligned at the top, so we will add a property called vertical-align to our CSS.

Vertical-align specifies whether an inline-block element will align at the top, bottom, or middle of its neighboring elements. We can add a vertical-align property with a value of top to fix the layout.

main {
  display: inline-block;
  vertical-align: top:
  width: 70%;
  background-color: #2ecc71;
  box-sizing: border-box;
  padding: 10px;
}
aside {
  display: inline-block;
  vertical-align: top;
  width: 30%;
  background-color: #9b59b6;
  box-sizing: border-box;
  padding: 10px;
}

Adding Variation

You can use floats or inline-block to create two-column layouts, three-column layouts or grids with multiple columns. You can change the width, padding, and colors. You can even add margins, as long as the final width (including margins) is 100%.

Once you’ve mastered these, you can learn newer ways to make layouts, including Flexbox and CSS Grid. But for now, floats and inline-block are great for any website.

Once you’ve created the basic structure, you can add contents to each section of your layout to create a complete page.

Now you know how to make the layouts you see every day on the web.

Go to the next lesson to learn how to move HTML elements to specific points on your web page.

© 2016-2022. All rights reserved.