Skip to main content

CSS Float — exercises and bug fixes

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

    Float left

    easy10 min

    Float #box to the left.

  2. 2

    Float right

    easy10 min

    Float #box to the right.

  3. 3

    Clear a float

    easy10 min

    Make #text clear both floats.

  4. 4

    Clear one side

    easy10 min

    Make #text clear left floats only.

  5. 5

    Contain floats with flow-root

    medium10 min

    Use display: flow-root on the wrapper.

Find the bug(5)

  1. 1

    Fix the misspelled property

    easy8 min

    The property is float.

  2. 2

    Fix the wrong direction

    easy8 min

    The box should float right.

  3. 3

    Fix the invalid clear value

    easy8 min

    "all" is not a clear value; use both.

  4. 4

    Fix clear applied to the float itself

    easy8 min

    The clearing belongs on the following element.

  5. 5

    Fix the overflow hack

    easy8 min

    Use display: flow-root instead of overflow to contain floats.

Ready to write the code?

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

Open the workspace