1 00:00:00,000 --> 00:00:04,780 [MUSIC] 2 00:00:04,780 --> 00:00:06,240 Hey, everyone, Guil here. 3 00:00:06,240 --> 00:00:09,780 It's time to practice the basics of CSS floats, a commonly used method for 4 00:00:09,780 --> 00:00:12,685 laying out parts of a webpage and wrapping content around elements. 5 00:00:12,685 --> 00:00:15,865 You're going to lay out portions of this webpage using floats. 6 00:00:15,865 --> 00:00:18,215 To get started, launch the workspace with this video. 7 00:00:18,215 --> 00:00:22,645 I have already included an HTML and CSS file for this exercise. 8 00:00:22,645 --> 00:00:26,735 And one of the style sheets linked to the HTML already includes the base styles and 9 00:00:26,735 --> 00:00:28,865 some of the layout styles for the page. 10 00:00:28,865 --> 00:00:30,215 Now let's walk through what you'll need to do. 11 00:00:31,385 --> 00:00:34,260 In the file floats.css, 12 00:00:34,260 --> 00:00:38,810 you'll see six comments with instructions on the CSS styles you'll need to write. 13 00:00:38,810 --> 00:00:45,050 So first, you'll apply a float to li tags inside nav and you'll 14 00:00:45,050 --> 00:00:49,860 need to make sure the floats follow other HTML source order from left to right. 15 00:00:49,860 --> 00:00:55,546 In HTML, the image inside the first article has a class of img-featured. 16 00:00:55,546 --> 00:01:00,610 So you're going to float this image, so that content flows around 17 00:01:00,610 --> 00:01:05,100 its left side, then to create visual separation between the content and 18 00:01:05,100 --> 00:01:10,850 image, apply a 15 pixel margin to the top, bottom, and left sides of the image. 19 00:01:10,850 --> 00:01:16,280 The next two images on the page have a class of image article, 20 00:01:16,280 --> 00:01:19,010 so you'll target those images and float them so 21 00:01:19,010 --> 00:01:24,700 that content flows along their right side, then apply a 20 pixel right margin. 22 00:01:26,030 --> 00:01:31,705 Next to the two bottom images, you'll see a div with a class article content. 23 00:01:31,705 --> 00:01:34,055 So, you'll float article content, so 24 00:01:34,055 --> 00:01:37,445 that it's positioned on the same line as img-article. 25 00:01:37,445 --> 00:01:42,075 That also means that you'll need to adjust the width of the article content div, so 26 00:01:42,075 --> 00:01:44,485 that both elements can fit on the same line side by side. 27 00:01:45,720 --> 00:01:49,140 Now, at this point, you'll have noticed that floating the images and 28 00:01:49,140 --> 00:01:52,930 divs collapsed the height of the parent article containers. 29 00:01:52,930 --> 00:01:55,800 So, you'll use one of techniques you learned to clear or 30 00:01:55,800 --> 00:01:58,780 open up the collapsed space around floated elements. 31 00:01:58,780 --> 00:02:02,410 I've included this group utility class to help you out with that. 32 00:02:02,410 --> 00:02:06,410 And finally, you'll center align the navigation inside the header. 33 00:02:06,410 --> 00:02:09,360 I've posted resources that can help you solve this part of the challenge 34 00:02:09,360 --> 00:02:10,680 in the teacher's notes. 35 00:02:10,680 --> 00:02:13,210 The goal is to get your page layout to look like this. 36 00:02:14,600 --> 00:02:16,840 This is a great way to practice what you've learned so 37 00:02:16,840 --> 00:02:19,040 far about CSS layout and floats. 38 00:02:19,040 --> 00:02:22,210 Good luck, have fun, and in the next video, I'll walk you through the solution.