Putting things side by side was this much work

01 / 05

Rows the way you have done them

Up to now you have used float to put things side by side. You write float: left; on each child you want in the row, then close it off with a clear: both; box.

Those three pieces are the only way you have so far.

.item {  float: left;  width: 150px;}.clear {  clear: both;}

02 / 05

The annoying parts

It works, but a few things nag.

you need a box for clear that is not there for its contents
you have to work out the widths and add them up yourself
neighbours do not come out the same height
it is bad at centring

Every row is a lot to think about.

03 / 05

A peek at the finished form

What this chapter teaches is a way of writing that lines things up in a single line. You add one line to the parent.

The children get nothing. No clear box either.

.menu {  display: flex;}

04 / 05

What you will be able to do by the end

It goes in this order.

write one line on the parent and the children go across
share out the space that is left over between the children
wrap children that do not fit
combine it with width conditions
stack them downwards on a narrow screen

Most of your layout troubles so far get sorted here.

05 / 05

First, the way you have now

You appreciate the new way best if you build the old way properly once.

The exercises in this lesson are float revision. Have a go.