1 00:00:00,443 --> 00:00:01,606 So how'd it go? 2 00:00:01,606 --> 00:00:04,164 Were you able to layout the columns using floats? 3 00:00:04,164 --> 00:00:06,642 Now, I'm gonna show you the methods I used. 4 00:00:06,642 --> 00:00:10,147 First, in order to float the columns next to each other, 5 00:00:10,147 --> 00:00:12,203 I need to get each column a width. 6 00:00:12,203 --> 00:00:14,743 I'll show you what happens if you don't set a width. 7 00:00:14,743 --> 00:00:16,526 Back in my style sheet, 8 00:00:16,526 --> 00:00:21,882 inside the media query I'll scroll down to the Columns section here and 9 00:00:21,882 --> 00:00:27,607 I'll target the class col and I'll float them left by typing float: left. 10 00:00:29,687 --> 00:00:34,800 Back in the preview when I refresh the page, nothing happens. 11 00:00:34,800 --> 00:00:36,910 The columns are technically floated, 12 00:00:36,910 --> 00:00:41,100 but their content takes up the full width of the container. 13 00:00:41,100 --> 00:00:45,956 So there's no available space on either side of the columns to accommodate 14 00:00:45,956 --> 00:00:48,355 them horizontally on the same line. 15 00:00:48,355 --> 00:00:52,583 Back inside the media query, I'll give each column a fluid width value. 16 00:00:52,583 --> 00:00:57,971 First, I'll target the primary column with 17 00:00:57,971 --> 00:01:04,222 a class .primary and I'll set its width to 60%. 18 00:01:04,222 --> 00:01:08,771 Right below, I'll target the secondary column with the class .secondary. 19 00:01:11,717 --> 00:01:15,107 And I'll set the width to 40%. 20 00:01:15,107 --> 00:01:18,605 I'll save my style sheet and refresh the page. 21 00:01:18,605 --> 00:01:21,250 And now, my columns are floated on the same line. 22 00:01:21,250 --> 00:01:23,266 So my layout looks pretty good. 23 00:01:23,266 --> 00:01:27,827 Now, I wanna create more separation between the columns to make the content 24 00:01:27,827 --> 00:01:29,332 a little easier to read. 25 00:01:29,332 --> 00:01:31,249 As you learned in our earlier challenge, 26 00:01:31,249 --> 00:01:34,020 the spaces between columns are called gutters. 27 00:01:34,020 --> 00:01:37,599 So to create small gutters between each column in my layout, 28 00:01:37,599 --> 00:01:40,841 I'll once again, use left and right padding values. 29 00:01:40,841 --> 00:01:45,713 So in the col rule, I'll add a padding-left property and 30 00:01:45,713 --> 00:01:51,381 set the value to 1em, then I'll add a padding-right property and 31 00:01:51,381 --> 00:01:53,877 set the value to 1em as well. 32 00:01:56,853 --> 00:01:59,060 So, everything in my layout seems fine. 33 00:02:00,080 --> 00:02:04,690 But if I go back to my style sheet and apply a red border around my container, 34 00:02:04,690 --> 00:02:08,330 we can see how the containers divs height has collapsed. 35 00:02:08,330 --> 00:02:11,893 It's height doesn't expand to surround the floated elements. 36 00:02:11,893 --> 00:02:16,489 And since there's nothing to clear the floats, the natural behavior of 37 00:02:16,489 --> 00:02:21,401 floats causes the content in the footer to wrap around the right column here. 38 00:02:21,401 --> 00:02:26,338 Also, when you shorten the view port height, the text in the columns overflows 39 00:02:26,338 --> 00:02:30,326 into the footer and the footer appears underneath the columns. 40 00:02:30,326 --> 00:02:32,677 This is why you need to clear floats in a container. 41 00:02:36,675 --> 00:02:38,901 Fortunately, you already know the fix for this. 42 00:02:38,901 --> 00:02:43,887 I can simply give the parent container the class clearfix. 43 00:02:49,339 --> 00:02:50,715 And my layout is now perfect. 44 00:02:56,898 --> 00:03:01,659 What's useful about floats is that you're able to change the order of the columns 45 00:03:01,659 --> 00:03:04,427 without having to change anything in the HTML. 46 00:03:04,427 --> 00:03:10,673 For instance, if I want to reverse the order of the two columns, 47 00:03:10,673 --> 00:03:16,471 I can change the columns's float value from left to right. 48 00:03:16,471 --> 00:03:20,985 And now the column order is reversed and that's all there is to it. 49 00:03:20,985 --> 00:03:21,529 Great job. 50 00:03:25,781 --> 00:03:29,830 Now that you know the difference between floats and the in line or in line 51 00:03:29,830 --> 00:03:34,707 block display methods, when should you use in line block over floats and vice versa? 52 00:03:34,707 --> 00:03:38,053 Well, it depends on your layout and what you're trying to accomplish. 53 00:03:38,053 --> 00:03:42,590 You can use the inline-block method to lay out navigation items side by side or 54 00:03:42,590 --> 00:03:47,267 create a simple two column layout or use inline-block when you need more control 55 00:03:47,267 --> 00:03:51,580 over the center and vertical alignment of your elements. 56 00:03:51,580 --> 00:03:54,180 As you learned in the previous section of this course, 57 00:03:54,180 --> 00:03:57,910 aligning an inline-block element, like a column to the top, 58 00:03:57,910 --> 00:04:02,600 middle or bottom of a container is simple with the vertical align property and 59 00:04:02,600 --> 00:04:07,350 centering a horizontal nav bar in a header is also easy with the text align property. 60 00:04:08,530 --> 00:04:11,860 Use floats when you need content to flow along the left or 61 00:04:11,860 --> 00:04:13,460 right side of an element. 62 00:04:13,460 --> 00:04:16,480 For example, flowing text around an image or 63 00:04:16,480 --> 00:04:19,810 pushing one column to the left edge of its container and 64 00:04:19,810 --> 00:04:23,420 the next column to the right edge, so they appear on the same line. 65 00:04:23,420 --> 00:04:28,339 One advantage of using floats over inline or inline-block layout is that you don't 66 00:04:28,339 --> 00:04:33,048 have to deal with the default horizontal white space created by the browser, but 67 00:04:33,048 --> 00:04:35,973 you do need to be aware of collapsing containers. 68 00:04:35,973 --> 00:04:38,181 So that'll do it for CSS floats. 69 00:04:38,181 --> 00:04:40,650 Keep up the great work and I'll see you in the next section.