Creating Columns with Inline-Block & Calc()

Topics covered in this HTML & CSS tutorial:

Displaying content as columns using inline-block, Using CSS calc()

Exercise Preview

Exercise Overview

In this exercise, you’ll create columns using inline-block. Along the way you’ll learn about some new CSS selectors (:not and :last-child) and how you can use CSS to calculate numeric values that involve different types of measurements (such as percentages and pixels).

Getting Started

1. We’ll be switching to a new folder of prepared files for this exercise. In your code editor, close all open files to avoid confusion.
2. For this exercise we’ll be working with the Tahoe 3 Columns folder located in Desktop > Class Files > Advanced HTML CSS Class. Open that folder in your code editor if it allows you to (like Visual Studio Code does).
3. Open index.html from the Tahoe 3 Columns folder.

4. Preview index.html in a browser.

   Below the header photo are 3 sections. On wide screens these can be columns so users don’t have to scroll as much to see the content.

5. Leave the page open in the browser so we can come back to it and reload as we make changes.

Creating a 3-Column Layout Using Inline-Block

1. Switch back to your code editor and open main.css from the css folder (in the Tahoe 3 Columns folder).

2. In the min-width: 950px media query add the following code shown below in bold:

   section {
      width: 33.33%;
      margin: 30px 0;
   }
   

   NOTE: We want the three columns to evenly fill the area, so we’re making each column 33.33% wide. In this rule we removed the left/right margins added by a previous rule. In a moment we’ll be adding some margin back to add space between the columns, but we’ll need to do so in a very specific way.

   How did we choose 950px for the media query? We initially guessed an amount, tested it, and then adjusted until we decided on 950. This amount is based on how the content fits, not on any specific device size.

3. Save the file, then reload the page in your browser. The 3 sections are narrow, but we need to get them side-by-side.

4. Go back to main.css and add:

   section {
      width: 33.33%;
      display: inline-block;
      margin: 30px 0;
   }
   

5. Save the file and reload the page in your browser. When the window is wide, only two of the sections will be next to each other, so why aren’t all three columns fitting as we’d expect?

6. Notice there’s a small space between the 2 columns that are next to each other. Think of each of the column like a word, and that gap is like a space character between words. In the HTML code, our section tags are on different lines, and that’s creating the extra space. With the extra space there’s not enough room for the 3rd column to fit so it wraps to the next line. There are multiple ways we can fix this:

   • Put the section tags on the same line of code with no space between them. We’re not going to do this because it makes the code a bit harder to read.
   • Use an HTML comment to tell the browser to ignore the space between the section tags. This is what we’ll do, because we think it makes the code easier to read. HTML comments are written like this:
     <!-- anything in here is ignored -->
7. Switch back to to index.html in your code editor.

8. Add two HTML comments (after the first and second section tags) as shown below in bold. Be careful to open and close each comment.

   <main>
      <section>
   

   Code Omitted To Save Space

      </section><!--
      --><section>
   

   Code Omitted To Save Space

      </section><!--
      --><section>
   

   Code Omitted To Save Space

      </section>
   </main>
   

9. Save the file, then reload the page in your browser. Now the columns should all fit!

Aligning Sections to the Top

The columns are displaying side-by-side but the alignment is not what we want. With inline-block, elements behave like text, aligning on the baseline (bottom) by default. Let’s align their tops instead.

1. Return to main.css in the code editor and, in the rule for section, set the following:

   section {
      width: 33.33%;
      display: inline-block;
      vertical-align: top;
      margin: 30px 0;
   }
   

2. Save the file, then return to the browser and reload the page. It looks better with all the sections aligning at the top, but the columns could use some space between them. We’ll make it exactly 30px to match the space above them.

Using CSS calc()

We want to add margin to the right of the all the sections, except for the last column. If the last column had extra space on its right, the design would not be properly centered. We could add right margin to all the columns, and then remove it on the last, but there’s a way to target all of them… except the last!

1. Return to main.css in your code editor and in the min-width: 950px media query, below the section rule, add the following new rule shown below in bold:

   section {
      width: 33.33%;
      display: inline-block;
      vertical-align: top;
      margin: 30px 0;
   }
   section:not(:last-child) {
      margin-right: 30px;
   }
   

   This selector means: any section that is not the last element (within the parent container). We’ll cover more of these types of advanced selectors in a later exercise.

2. Save the file, then reload the page in your browser.

   Again we see the columns don’t all fit on the same line, because we added space. Our columns can’t be 33.33% wide plus the space. We need to subtract 60px from the total space (2 columns have 30px of margin on their right). H ow do we subtract a fixed pixel value from a percent? We let the browser do it using a calc() function!

3. Return to main.css in your code editor and in the section rule replace the 33.33% width as shown below in bold:

   section {
      width: calc();
      display: inline-block;
      vertical-align: top;
      margin: 30px 0;
   }
   

4. Add the following math, paying close attention to spaces!

   section {
      width: calc( (100% - 60px)/3 );
      display: inline-block;
      vertical-align: top;
      margin: 30px 0;
   }
   

   So how does this math work? 100% of the space, minus the 60px of margin, divided by the number of columns (3) gives us the exact size we need for each column!

   NOTE: For addition and subtraction, the + and - operators must always be surrounded by whitespace. For multiplication and division, the * and / operators do not need whitespace, but adding it for consistency is allowed, and recommended.

5. Save the file, then reload the page in your browser. The columns should now fit!