Introducing the Practice2:23 with Guil Hernandez
See an overview of the web page you'll lay out using floats.
[MUSIC] 0:00 Hey, everyone, Guil here. 0:04 It's time to practice the basics of CSS floats, a commonly used method for 0:06 laying out parts of a webpage and wrapping content around elements. 0:09 You're going to lay out portions of this webpage using floats. 0:12 To get started, launch the workspace with this video. 0:15 I have already included an HTML and CSS file for this exercise. 0:18 And one of the style sheets linked to the HTML already includes the base styles and 0:22 some of the layout styles for the page. 0:26 Now let's walk through what you'll need to do. 0:28 In the file floats.css, 0:31 you'll see six comments with instructions on the CSS styles you'll need to write. 0:34 So first, you'll apply a float to li tags inside nav and you'll 0:38 need to make sure the floats follow other HTML source order from left to right. 0:45 In HTML, the image inside the first article has a class of img-featured. 0:49 So you're going to float this image, so that content flows around 0:55 its left side, then to create visual separation between the content and 1:00 image, apply a 15 pixel margin to the top, bottom, and left sides of the image. 1:05 The next two images on the page have a class of image article, 1:10 so you'll target those images and float them so 1:16 that content flows along their right side, then apply a 20 pixel right margin. 1:19 Next to the two bottom images, you'll see a div with a class article content. 1:26 So, you'll float article content, so 1:31 that it's positioned on the same line as img-article. 1:34 That also means that you'll need to adjust the width of the article content div, so 1:37 that both elements can fit on the same line side by side. 1:42 Now, at this point, you'll have noticed that floating the images and 1:45 divs collapsed the height of the parent article containers. 1:49 So, you'll use one of techniques you learned to clear or 1:52 open up the collapsed space around floated elements. 1:55 I've included this group utility class to help you out with that. 1:58 And finally, you'll center align the navigation inside the header. 2:02 I've posted resources that can help you solve this part of the challenge 2:06 in the teacher's notes. 2:09 The goal is to get your page layout to look like this. 2:10 This is a great way to practice what you've learned so 2:14 far about CSS layout and floats. 2:16 Good luck, have fun, and in the next video, I'll walk you through the solution. 2:19
You need to sign up for Treehouse in order to download course files.Sign up