Floats - Activity

Instructions

Floats Activity Starter Code

Using floats.html and floats.css, in the folder above as a starting point, work to create the missing CSS necessary to form the following layout:

This will not be easy so work at it as best you can. This is a challenging activity. At the very least, try to increase your understanding of CSS properties.

Hint:

Concentrate on first figuring out how to create the boxes. Think about using background colors (CSS property: background).

Hint:

We've provided the styling you need for the header element. Use this as a starting point to style the others.

Hint:

You will need to apply each of the following CSS properties at least once:

  • padding
  • margin
  • background
  • float
  • width (read up on width by percent)
  • color
  • clear
  • overflow
  • height
  • font-size
  • line-height
Solution 
/**
 * Float Layout Activity
 **/

* {
  box-sizing: border-box;
  text-align: center;
}

body {
  font-size: 24px;
  line-height: 32px;
  color: #333;
}

header {
  padding: 20px;
  margin-bottom: 20px;
  color: #333;
  background: #FFA500;
}

section {
  padding: 20px;
  margin-bottom: 20px;
  background: #FFA500;
}

#left {
  float: left;
  width: 33.3%;
  color: #fff;
  background: #30948D;
}

#middle {
  float: left;
  width: 33.3%;
  color: #fff;
  background: #9E1212;
}

#right {
  float: left;
  width: 33.3%;
  color: #fff;
  background: #30948D;
}

#full {
  width: 100%;
  overflow: auto;
  clear: both;
  color: #fff;
  background: #394549;
}

#division {
  padding: 20px;
  margin-top: 20px;
  background: #6ea3da;
}

aside {
  float: left;
  width: 33%;
  height: 200px;
  padding: 20px;
  margin-left: 30px;
  text-decoration-color: white;
  background: #a6b747;
  border: 1px solid #eee;
}

footer {
  padding: 20px;
  clear: both;
  background: #FFA500;
}