Skip to main content

CSS Width and Height — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the CSS Width and Height lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.

Sign in to start solvingCreate a free account

Exercises(5)

  1. 1

    Set a fixed width

    easy10 min

    Make #box 200px wide.

  2. 2

    Set a fixed height

    easy10 min

    Make #box 120px tall.

  3. 3

    Cap the width

    easy10 min

    Stop #box growing past 300px.

  4. 4

    Set a minimum height

    easy10 min

    Give #box a minimum height of 80px.

  5. 5

    Include padding in the width

    medium10 min

    Use border-box so padding does not widen the box beyond 200px.

Find the bug(5)

  1. 1

    Fix the content-box overflow

    easy8 min

    With content-box the padding pushes the box wider than intended.

  2. 2

    Fix the missing unit

    easy8 min

    A bare number is not a valid width.

  3. 3

    Fix min and max swapped

    easy8 min

    The maximum is smaller than the minimum, so the box collapses.

  4. 4

    Fix the wrong property

    easy8 min

    The property is max-width, not width-max.

  5. 5

    Fix the fixed height that should be a minimum

    easy8 min

    A hard height clips content; a minimum grows with it.

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace