Make the sizes add up – CSS Exercise with Solution

Two half-width boxes should sit side by side, but they wrap because they are too wide.

What to build

A fix that does not change their width values.

Requirements

Every element uses box-sizing: border-box.
.half keeps width: 50% and padding: 20px.
Both boxes are on the same line.

Constraints

Do not change the width, padding or HTML.

Example

Without border-box, 50% plus 40px of padding is more than half of the row.

Why it works

With border-box the padding is taken from inside the 50%, so that two halves add up to exactly 100%.

Hints

Hint 1

box-sizing applies to each element, so use the universal selector.

Hint 2

With border-box, width already includes padding and border.

Solution

Show one correct solution (try it yourself first)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Halves</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 0; }
    .row { font-size: 0; }
    .half { display: inline-block; width: 50%; padding: 20px; font-size: 16px; }
  </style>
</head>
<body>
  <div class="row">
    <div class="half">One</div>
    <div class="half">Two</div>
  </div>
</body>
</html>

Lesson: The box model →