Send the footer left and right

01 / 06

For the right-hand side, float: right

If float: left; means "pull it left and lift it", then float: right; means pull it right and lift it.

All you change is the value. The instruction you learned on the header works the other way round unchanged.

.links {  float: right;}

02 / 06

Put left and right together

Give the name float: left; and the links float: right; and they go to opposite ends of the band.

In a footer or a header, this left-and-right split is the arrangement you reach for most often.

.name {  float: left;}.links {  float: right;}

03 / 06

Choose colours that suit the foot

The received wisdom is that a footer should stand out less than the body. A dark background with a slightly muted text colour on it holds together well.

Matching the height and the line height works just as it did on the header.

.footer {  height: 72px;  background-color: #333333;  color: #dddddd;  line-height: 72px;}

04 / 06

Text size says what matters

The copyright line can go down to about 12px. Small reads as "not important" to anyone looking at it.

The CSS goes in style.css. Have a go.

.copyright {  font-size: 12px;}

05 / 06

Float everything inside and the parent loses its height

Float every child of the footer and something inconvenient happens: the parent (.footer) stops seeing any height in its contents and collapses flat.

float means "lift this out and let text flow around it," so as far as the parent is concerned, it is as if there is nothing inside at all.

06 / 06

Setting height keeps you safe

This chapter avoids that problem because .footer has a height set directly on it. Fix the band's height yourself and the band holds its shape even when its contents float.

If you want to build a band entirely out of floats with no fixed height, Flexbox — covered in a later chapter — is the more natural tool.