Skip to main content

Normal Flow — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the Normal Flow 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

    Pull an element out of flow

    easy10 min

    Float #box so the text wraps beside it.

  2. 2

    Make a block inline

    easy10 min

    Turn #box into an inline element.

  3. 3

    Use inline-block

    easy10 min

    Give #box inline-block so it flows inline but accepts a size.

  4. 4

    Remove an element from flow

    easy10 min

    Take #box out of normal flow with absolute positioning.

  5. 5

    Hide without reserving space

    medium10 min

    Use display: none so #box takes no space at all.

Find the bug(5)

  1. 1

    Fix inline used where inline-block was needed

    easy8 min

    An inline element ignores width.

  2. 2

    Fix visibility used to remove space

    easy8 min

    visibility: hidden still reserves the space.

  3. 3

    Fix the missing positioning context

    easy8 min

    An absolute child needs a positioned ancestor.

  4. 4

    Fix the invalid display value

    easy8 min

    "block-inline" is not a display value.

  5. 5

    Fix float used to take an element out of flow

    easy8 min

    Absolute positioning removes it fully.

Ready to write the code?

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

Open the workspace