Creating Columns with Inline-Block & Calc()

Topics Covered in This HTML & CSS Tutorial:

Master advanced layout techniques by displaying content as columns using inline-block elements and harness the power of CSS calc() for precision calculations

Exercise Preview

Exercise Overview

In this comprehensive exercise, you'll master the art of creating responsive multi-column layouts using the inline-block display method. This approach remains invaluable in modern web development, especially when working with legacy codebases or when CSS Grid and Flexbox aren't suitable options. You'll discover advanced CSS selectors including :not() and :last-child pseudo-selectors, and learn to leverage CSS calc() function to perform dynamic calculations that combine different unit types—a technique that's become increasingly powerful with modern browser support. By the end of this tutorial, you'll understand how to create pixel-perfect layouts that adapt gracefully across different screen sizes while maintaining precise control over spacing and alignment.

Getting Started

1. We'll transition to a fresh set of prepared files for this exercise. Close all currently open files in your code editor to maintain focus and avoid potential conflicts.
2. Navigate to the Tahoe 3 Columns folder located at Desktop > Class Files > Advanced HTML CSS Class. If you're using a modern code editor like Visual Studio Code, Sublime Text, or Atom, open the entire folder to enable enhanced file navigation and IntelliSense features.
3. Open index.html from the Tahoe 3 Columns folder to begin examining the base structure.

4. Preview index.html in your browser—preferably a modern browser like Chrome, Firefox, or Edge for consistent rendering.

   Observe the current layout: beneath the header image, you'll notice three distinct content sections stacked vertically. On wider displays, this vertical arrangement forces unnecessary scrolling. Our goal is to transform these sections into an elegant three-column layout that maximizes screen real estate and improves user experience.

5. Keep the browser tab open for efficient workflow—you'll be refreshing frequently to observe your changes in real-time.

Creating a 3-Column Layout Using Inline-Block

Now we'll implement the foundational CSS that transforms our vertical layout into a responsive column system. The inline-block method offers excellent browser compatibility and precise control over element behavior.

1. Return to your code editor and open main.css from the css folder within the Tahoe 3 Columns directory.

2. Locate the min-width: 950px media query and enhance the section rule with the following property:

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

   Here's the strategy: we're allocating exactly one-third of the available width to each section (33.33%), ensuring equal distribution across the container. Notice we've temporarily removed horizontal margins—this is intentional. Adding margins to percentage-based widths requires careful calculation to prevent layout overflow, which we'll address using CSS calc() shortly.

   The 950px breakpoint was determined through iterative testing rather than targeting specific devices. This content-first approach ensures the layout breaks at the optimal point for readability and visual hierarchy, regardless of device specifications.

3. Save the file and refresh your browser. You'll notice the sections have narrowed considerably, but they're still stacked vertically. This is expected behavior—we need to modify the display property next.

4. Return to main.css and add the crucial display property:

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

5. Save and refresh the page. On wide viewports, you'll see only two sections align horizontally, with the third wrapping below. This behavior reveals a fundamental characteristic of inline-block elements that we need to address.

6. The culprit is whitespace inheritance from your HTML formatting. Inline-block elements behave like inline text, meaning whitespace between HTML tags creates literal spaces in the rendered layout—just like spaces between words in a sentence. Your formatted HTML (with line breaks between section tags) introduces unwanted spacing that prevents the third column from fitting.

   Professional developers handle this issue several ways:

   • Compressed HTML method: Place section tags on the same line with no spaces. While functional, this sacrifices code readability and maintainability.
   • HTML comment method: Use HTML comments strategically to neutralize whitespace while preserving readable code structure. This approach offers the best balance of functionality and maintainability, which we'll implement.
7. Switch to index.html in your code editor to implement the comment solution.

8. Insert HTML comments between each section tag as demonstrated below. Pay careful attention to comment syntax—improper formatting will break your layout:

   <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 and refresh your browser. All three columns should now align horizontally on wide screens—success!

Aligning Sections to the Top

While our columns are now side-by-side, their vertical alignment needs refinement. Understanding inline-block behavior is crucial for precise layout control.

1. Return to main.css and add the vertical alignment property to your section rule:

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

   By default, inline-block elements align to the baseline (bottom edge), similar to text characters in a line. The vertical-align: top property ensures all columns start at the same vertical position, creating the clean, professional appearance we want.

2. Save and refresh to see the improvement. The alignment is now correct, but the columns would benefit from horizontal spacing to improve readability and visual separation. Let's add 30px of space between columns to match our existing vertical margins.

Using CSS Calc() for Precision Layout Control

Now we'll implement one of CSS's most powerful features: the calc() function. This tool allows browsers to perform real-time calculations mixing different unit types, enabling precise layouts that were previously impossible or required JavaScript.

1. In main.css, add a new rule targeting all sections except the last one:

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

   This advanced selector demonstrates CSS's pseudo-class power: section:not(:last-child) targets every section that isn't the final child element within its parent container. This approach is more maintainable than manually adding classes, and it automatically adapts if you later modify your HTML structure.

2. Save and refresh your browser. The columns will again fail to fit horizontally—this is expected behavior that demonstrates why precise calculation is necessary.

   Here's the mathematical reality: our current approach attempts to use 133.33% of available width (33.33% × 3 sections) plus 60px of margins (30px × 2 sections with right margins). This overflow forces the layout to wrap, breaking our intended design.

3. Replace the fixed percentage width with CSS calc() function:

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

4. Complete the calculation with precise mathematical logic:

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

   This calculation elegantly solves our layout puzzle: start with 100% of the container width, subtract the 60px of total margin space (30px × 2 sections), then divide the remaining space equally among three columns. The browser performs this calculation dynamically, ensuring perfect fit regardless of viewport width.

   Critical syntax note: Addition (+) and subtraction (-) operators in calc() must be surrounded by whitespace—this isn't optional. Multiplication (*) and division (/) don't require spaces but including them improves code readability and maintains consistency.

5. Save and refresh your browser. Your three-column layout should now display flawlessly, with perfect spacing and alignment across all viewport sizes above 950px.