Fill the space with calc – CSS Exercise with Solution

Two columns must exactly fill their container, whatever its width.

What to build

A fixed sidebar and a flexible main column.

Requirements

.side is 200px wide.
.main is the full width of .wrap minus 200px, written with calc().
.wrap has font-size: 0, so that whitespace between the columns takes no room, and both columns set their own text back to 16px.
.side and .main are inline-block.

Constraints

Do not use flexbox or grid. Both columns must be on the same line.

Example

width: calc(50% - 10px);

Why it works

calc() can mix a percentage with pixels, which is the only way to say "whatever is left over" in a single value. Removing the gap makes the arithmetic exact.

Hints

Hint 1

A sidebar of 200px leaves 100% minus 200px.

Hint 2

Spaces around the minus sign are required.

Hint 3

Inline-block elements sit side by side.

Solution

Show one correct solution (try it yourself first)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Calc</title>
  <style>
    body { margin: 0; }
    .wrap { font-size: 0; }
    .side, .main { display: inline-block; font-size: 16px; }
    .side { width: 200px; }
    .main { width: calc(100% - 200px); }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="side">Side</div>
    <div class="main">Main</div>
  </div>
</body>
</html>

Lesson: Colours, units and values →