Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

The Float Challenge Solution

4:41 with Guil Hernandez

This video covers the solution to the Float Challenge.

Gutters

In web design, the spaces between columns are called gutters. Developers create gutters using padding, like so:

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

Or margins:

.col {    
  margin-right: 1em;
  margin-left: 1em;
}

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

Video review

  • Use inline-block to lay out navigation items side by side or create a simple two-column layout
  • Use inline-block when you need control over center and vertical alignment
  • Use floats to flow content along the left or right side of an element
  • Floats do not create default horizontal white space between elements
  • Be aware of collapsing containers

So how'd it go? 0:00 Were you able to layout the columns using floats? 0:01 Now, I'm gonna show you the methods I used. 0:04 First, in order to float the columns next to each other, 0:06 I need to get each column a width. 0:10 I'll show you what happens if you don't set a width. 0:12 Back in my style sheet, 0:14 inside the media query I'll scroll down to the Columns section here and 0:16 I'll target the class col and I'll float them left by typing float: left. 0:21 Back in the preview when I refresh the page, nothing happens. 0:29 The columns are technically floated, 0:34 but their content takes up the full width of the container. 0:36 So there's no available space on either side of the columns to accommodate 0:41 them horizontally on the same line. 0:45 Back inside the media query, I'll give each column a fluid width value. 0:48 First, I'll target the primary column with 0:52 a class .primary and I'll set its width to 60%. 0:57 Right below, I'll target the secondary column with the class .secondary. 1:04 And I'll set the width to 40%. 1:11 I'll save my style sheet and refresh the page. 1:15 And now, my columns are floated on the same line. 1:18 So my layout looks pretty good. 1:21 Now, I wanna create more separation between the columns to make the content 1:23 a little easier to read. 1:27 As you learned in our earlier challenge, 1:29 the spaces between columns are called gutters. 1:31 So to create small gutters between each column in my layout, 1:34 I'll once again, use left and right padding values. 1:37 So in the col rule, I'll add a padding-left property and 1:40 set the value to 1em, then I'll add a padding-right property and 1:45 set the value to 1em as well. 1:51 So, everything in my layout seems fine. 1:56 But if I go back to my style sheet and apply a red border around my container, 2:00 we can see how the containers divs height has collapsed. 2:04 It's height doesn't expand to surround the floated elements. 2:08 And since there's nothing to clear the floats, the natural behavior of 2:11 floats causes the content in the footer to wrap around the right column here. 2:16 Also, when you shorten the view port height, the text in the columns overflows 2:21 into the footer and the footer appears underneath the columns. 2:26 This is why you need to clear floats in a container. 2:30 Fortunately, you already know the fix for this. 2:36 I can simply give the parent container the class clearfix. 2:38 And my layout is now perfect. 2:49 What's useful about floats is that you're able to change the order of the columns 2:56 without having to change anything in the HTML. 3:01 For instance, if I want to reverse the order of the two columns, 3:04 I can change the columns's float value from left to right. 3:10 And now the column order is reversed and that's all there is to it. 3:16 Great job. 3:20 Now that you know the difference between floats and the in line or in line 3:25 block display methods, when should you use in line block over floats and vice versa? 3:29 Well, it depends on your layout and what you're trying to accomplish. 3:34 You can use the inline-block method to lay out navigation items side by side or 3:38 create a simple two column layout or use inline-block when you need more control 3:42 over the center and vertical alignment of your elements. 3:47 As you learned in the previous section of this course, 3:51 aligning an inline-block element, like a column to the top, 3:54 middle or bottom of a container is simple with the vertical align property and 3:57 centering a horizontal nav bar in a header is also easy with the text align property. 4:02 Use floats when you need content to flow along the left or 4:08 right side of an element. 4:11 For example, flowing text around an image or 4:13 pushing one column to the left edge of its container and 4:16 the next column to the right edge, so they appear on the same line. 4:19 One advantage of using floats over inline or inline-block layout is that you don't 4:23 have to deal with the default horizontal white space created by the browser, but 4:28 you do need to be aware of collapsing containers. 4:33 So that'll do it for CSS floats. 4:35 Keep up the great work and I'll see you in the next section. 4:38

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

Sign up