* { font-family: Arial; }

header,
footer { height: 60px; width: 100%; background-color: #eeeeee; }

header { margin: 0 0 30px; }
footer { margin: 30px 0 0; text-align: right; }

header,
main { text-align: center; }

#coloured-box { height: 200px; width: 200px; margin: 0 auto; }
.box-section { height: 100px; width: 100px; float: left; }

#top-left { background-color: red; }
#top-right { background-color: green; }
#bottom-left { background-color: blue; }
#bottom-right { background-color: yellow; }

.clear { content: ''; clear: both; }