Set a fixed width — practice exercise

What you'll be asked to do

1. 1.Set a fixed widthexercise · easy · 10 min

   Make #box 200px wide.

   Passes when: Make #box 200px wide.

2. 2.Set a fixed heightexercise · easy · 10 min · practice plan

   Make #box 120px tall.

   Passes when: Make #box 120px tall.

3. 3.Cap the widthexercise · easy · 10 min · practice plan

   Stop #box growing past 300px.

   Passes when: Stop #box growing past 300px.

4. 4.Set a minimum heightexercise · easy · 10 min · practice plan

   Give #box a minimum height of 80px.

   Passes when: Give #box a minimum height of 80px.

5. 5.Include padding in the widthexercise · medium · 10 min · practice plan

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

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

6. 6.Fix the content-box overflowbug fix · easy · 8 min

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

   Passes when: With content-box the padding pushes the box wider than intended.

7. 7.Fix the missing unitbug fix · easy · 8 min · practice plan

   A bare number is not a valid width.

   Passes when: A bare number is not a valid width.

8. 8.Fix min and max swappedbug fix · easy · 8 min · practice plan

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

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

9. 9.Fix the wrong propertybug fix · easy · 8 min · practice plan

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

   Passes when: The property is max-width, not width-max.

10. 10.Fix the fixed height that should be a minimumbug fix · easy · 8 min · practice plan

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

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

Between them these tasks cover width and height, box-sizing and min and max sizing.

Looking for a different chapter? See every practice set, or switch to the interview theory questions.