MoreLesson 210Free preview

Responsive Floats

This lesson is part of How To · All levels

Summary

Responsive floats arrange elements that float side by side on the screen, then piled up vertically on the small screen. The classic pattern uses float: left and width percentages, then media query converts it to float: none and width: 100%. Nowadays flexbox or grid is more recommended, but understanding float remains useful for treating old code.

Key points

The float allows the elements to line up, but needs to be clear so that the parent does not collapse
Use the percentage width to load several columns in one row
Media query can convert float to none on a narrow screen
Flexboxes and grids are modern options that are easier to set up.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.