Box Model: CSS3 Box-Sizing & Calc()

Topics Covered in This Mobile & Responsive Web Design Tutorial:

Master the CSS Box Model fundamentals, implement CSS3 Box Sizing for modern layouts, and leverage the CSS3 Calc() function for dynamic positioning

Exercise Preview

Exercise Overview

The CSS box model remains one of the most crucial concepts for creating professional layouts, yet it's also where many developers encounter their first major frustrations. In this hands-on exercise, you'll dive deep into how the traditional box model works—and more importantly, why it often works against you when building responsive designs.

You'll discover how padding can unexpectedly break your carefully calculated layouts, then learn to implement the modern box-sizing: border-box approach that has become the industry standard since 2015. We'll also explore the powerful CSS calc() function, which allows you to perform dynamic calculations mixing different units—a technique that's invaluable for creating truly flexible, responsive components that adapt seamlessly across devices.

Getting Started

1. Navigate to the Box Sizing folder in your project directory and open it in your preferred code editor. Most modern editors like VS Code, Sublime Text, or WebStorm will allow you to open the entire folder for better project navigation.

2. Open index.html from the Box Sizing folder.

   NOTE: For this focused exercise, we've embedded the CSS directly in the document head rather than using an external stylesheet. This approach keeps everything contained in a single file and makes it easier to see the immediate relationship between HTML structure and styling rules.

3. Preview index.html in your browser—preferably Chrome or Firefox for the most consistent developer tools experience.

   Experiment by resizing the browser window and observe how the column layout responds. Notice that the images scale proportionally since we're using percentage-based widths. This responsive behavior is exactly what we want, but we're about to encounter a common problem when we try to add visual polish with padding.

4. Keep the page open in your browser and switch back to index.html in your code editor. This workflow—making changes and immediately previewing results—is essential for efficient front-end development.

5. Take a moment to examine the page structure. We're working with a classic two-column floated layout, with each column containing two images.

   NOTE: While modern CSS Grid and Flexbox offer more robust layout options, this floated approach still appears in many existing codebases and perfectly illustrates the box model challenges we need to address.

6. Locate line 16 and find the CSS selector that targets both our columns (.primary and .secondary). This combined selector demonstrates efficient CSS by applying shared properties to multiple elements simultaneously.

7. Add padding to create visual breathing room around our images. Update your CSS as follows:

   .primary,.secondary {
      float: left;
      width: 50%;
      padding: 40px;
   }

8. Save the file and reload your browser to see the results.

   You'll immediately notice a problem: the columns are no longer sitting side-by-side! This illustrates the classic box model issue that has frustrated developers for decades. Each column is set to 50% width, but the traditional box model applies that width only to the content area. The 40px padding gets added on all sides (80px total horizontal padding per column), making each column effectively 50% + 80px wide. Since 50% + 80px + 50% + 80px exceeds 100% of the container width, the second column is forced to wrap below the first.

Implementing the Modern Box Model

This layout breakdown perfectly demonstrates why the traditional CSS box model has become largely obsolete for modern web development. Fortunately, CSS3 introduced an alternative box model that solves this exact problem, and it's now supported across all browsers that matter in 2026.

Dynamic Positioning with the CSS Calc() Function

Now we'll explore one of CSS's most powerful features for responsive design: the calc() function. This tool allows you to perform mathematical operations mixing different units—something that's particularly valuable for creating layouts that adapt gracefully across different screen sizes.

1. Let's add the site logo to demonstrate advanced positioning techniques. Locate the opening <body> tag around line 30 and add the logo image:

   <body>
      <img src="img/logo.svg" class="logo" ALT="Fresh + Lively logo">
      <div class="primary">

2. Save the file and preview the changes in your browser.
3. The logo appears at its full size, which is clearly too large for our layout. This is expected behavior—we need to add CSS rules to control its presentation.
4. Return to your code editor to style the logo appropriately.

5. Add CSS rules for the logo at the bottom of your styles (around line 28), just before the closing </style> tag:

   .secondary {
         padding-left: 20px;
      }
      .logo {
         position: absolute;
         top: 100px;
         left: 0;
         width: 488px;
      }
   </style>

6. Save and reload to see the logo now positioned in the upper left corner at a more reasonable size.
7. The logo needs to be centered horizontally. Let's attempt the most obvious approach first. Return to your code editor.

8. Modify the left property to move the logo toward the center:

   .logo {
      position: absolute;
      top: 100px;
      left: 50%;
      width: 488px;
   }

9. Save and reload your browser to observe the results.

10. You'll notice the logo still isn't truly centered—this demonstrates a fundamental aspect of CSS positioning that many developers initially find counterintuitive.

    When you specify left: 50%, the browser positions the element's left edge at the 50% point of the container. To achieve true centering, we need to shift the logo left by half of its own width. This is where the calc() function becomes invaluable, allowing us to combine percentage and pixel values in a single calculation that the browser evaluates dynamically.

11. Let's implement the proper centering technique. Return to your code editor.

12. Update the left property to use calc() for precise positioning:

    .logo {
       position: absolute;
       top: 100px;
       left: calc(50% - 488px / 2);
       width: 488px;
    }

    NOTE: CSS calc() has specific syntax requirements. For addition and subtraction operations, the + and - operators must be surrounded by whitespace. While multiplication and division operators don't strictly require whitespace, including it improves code readability and consistency.

13. Save the file and reload your browser. The logo should now be perfectly centered regardless of the window size.

Creating a Fully Responsive Logo

Perfect centering is just the first step. For a truly professional responsive design, elements need to scale appropriately across different device sizes. Let's make our logo adaptive to various screen sizes.

1. Test the current responsive behavior by resizing your browser window to simulate mobile device widths (around 320-375px).

   You'll notice that while our column layout responds well to different screen sizes, the logo maintains its fixed 488px width, which can be problematic on smaller screens. Modern responsive design principles suggest that logos should scale proportionally to maintain visual hierarchy across devices.

2. Return to your code editor to implement responsive logo sizing.

3. Replace the fixed pixel width with a percentage-based width:

   .logo {
      position: absolute;
      top: 100px;
      left: calc(50% - 488px / 2);
      width: 50%;
   }

4. Now we need to update our positioning calculation to account for the dynamic logo width:

   .logo {
      position: absolute;
      top: 100px;
      left: calc(50% - 50% / 2);
      width: 50%;
   }

5. This calculation can be simplified significantly. When you subtract 50% / 2 (which equals 25%) from 50%, the result is simply 25%. Let's optimize our code:

   .logo {
      position: absolute;
      top: 100px;
      left: 25%;
      width: 50%;
   }

   While calc() enjoys excellent browser support in 2026, it's always good practice to simplify calculations when possible. This not only improves performance slightly but also makes the code more maintainable. The calc() function remains incredibly valuable for more complex scenarios where you need to mix different units or perform calculations that can't be simplified.

6. Save the file and test the final result across different browser sizes to confirm the logo now scales appropriately while maintaining perfect centering.