The Float Challenge

Resources

• MDN - float
• Float clearfix
• Nine rules for float behavior

Video review

1. Give each column inside the main container a fluid width.
2. The 'primary' column can be 60% wide and the 'secondary' column can be 40% -- it's up to you.
3. Use floats to display both columns horizontally so that they appear on the same line.
4. You're building the column layout using a mobile first approach, so the horizontal layout should apply to large screens only.
5. Be aware of collapsing containers caused by floats.

Related videos

• CSS Basics - Floats
• CSS Basics - Clearing Floats

Column layout tips

To add a left gutter to all but the first column, you can use this:

.col + .col {
  padding-left: 1em;
}

To remove the right gutter from the column closest to the right edge of the page, use :last-child

.col:last-child {
  padding-right: 0;
}

Bringing it all together
This snippet floats all columns left and applies a right gutter. It applies a left gutter to all but the first column, so the first column will be flush with the left margin of the page. Then it removes the right gutter from last column, so that it's flush with the right margin of the page.

.col {
  float: left;
  padding-right: 1em;
}

.col + .col {
  padding-left: 1em;
}

.col:last-child {
  padding-right: 0;
}

You can also apply a gutter using just a left padding or margin value, like this:

.col {
  float: left;
}

.col + .col {
  padding-left: 1.5em;
}