Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic trial
to watch this video

Sign up for Treehouse

The Float Challenge

1:22 with Guil Hernandez

You've learned a lot about CSS floats in this section of course. Now it's your turn to lay out parts of the design using floats.

Resources

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.

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;
}
  • 0:00

    You've learned a lot about CSS floats in this section of the course.

  • 0:03

    Now it's your turn to lay out parts of the page using floats.

  • 0:07

    You can access the files for

  • 0:08

    this challenge by launching the workspace on this page.

  • 0:12

    Similar to the horizontal navigation you created in the previous lessons,

  • 0:16

    you can lay out content columns on a single line using floats.

  • 0:20

    In fact, the float property is incredibly useful for floating columns and layouts.

  • 0:25

    For this challenge, you'll first need to give each

  • 0:29

    column inside the container div here a fluid width.

  • 0:33

    The primary content column can be 60% wide, and

  • 0:37

    the secondary content column can be 40% wide.

  • 0:40

    It's up to you.

  • 0:41

    Now, their combined widths should take up 100% of the container's width.

  • 0:47

    Then, in the CSS, you'll need to display both columns horizontally so

  • 0:53

    that they appear on the same line side by side like this.

  • 0:59

    You're building this layout using a mobile first approach, so

  • 1:03

    the horizontal layout should apply to large screens only.

  • 1:08

    And remember to be aware of collapsing containers caused by floats.

  • 1:12

    If you notice one, now you know how to fix it.

  • 1:14

    This is a helpful exercise to teach you how to use

  • 1:17

    one of the most common layout methods in web design.

  • 1:20

    In the next video, I'll show you the methods I used.

You need to sign up for Treehouse in order to download course files.

Sign up