Send the footer left and right

01 / 04

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 / 04

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 / 04

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 / 04

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;}