Floats

Knowing how to position elements on a page to build layouts is just as 0:00 important as understanding the box model components. 0:04 So here, we're gonna learn some of the basics of float positioning. 0:07 Now floats are one of the most commonly used methods for 0:11 laying out a page with CSS. 0:14 When an element is floated the element is taken out of the normal flow of 0:16 the page and placed along the left or right side of its container. 0:21 Depending on the float value we set and 0:26 that causes other elements to wrap around it. 0:28 So back in our index.html file. 0:32 The secondary content div on line 29 contains two nested divs and 0:35 each of them contain an image, an h3 element, a paragraph, and a list. 0:43 Now currently if we take a look at our layout, 0:50 we'll see how the two divs appear stacked. 0:52 So what we're gonna do is display the two divs as columns. 0:57 So they're gonna be laid out side by side in one row and 1:00 we're gonna do that using floats. 1:03 So first let's go back to our HTML file and give each of the two divs a class. 1:06 So, we're gonna scroll down to the div on line 30 and 1:12 let's give this div a class of resorts. 1:17 Next, let's scroll down to line 43, 1:23 and we're gonna give the second div the class, tips. 1:25 All right, so let's save our index.html file and 1:34 let's go back over to our style sheet. 1:37 And what we're going to do first is add a new comment section at the bottom of 1:39 our page that indicates where we're writing our float. 1:43 So let's copy Layout Styles content here, online 109. 1:46 And let's scroll down here right below the arrow rule. 1:53 I'm going to paste that comment and 1:56 I'm going to change the comment to read floated columns. 1:59 And don't worry about this section here just yet 2:08 we're gonna get to that in just a bit. 2:10 So what we're gonna do first is target both the resorts and 2:13 tips columns and give them a width. 2:17 So right under the floated columns comment let's first target the resorts class. 2:19 And I'll add a comma and we're also gonna target the tips class. 2:26 And let's give these columns a width. 2:33 And we're gonna make the width value, 46.5%. 2:36 So now we save our stylesheet, and refresh the the page, 2:41 we can see how each of the two divs takes up 46% of the parent container. 2:46 So now we're ready to lay them out side by side by floating them. 2:53 So, as I mentioned earlier, floats remove elements from the normal flow of the page. 2:59 And as we saw earlier, in the normal flow of our page, the divs are stacked on 3:04 top of each other vertically, since they are block level elements. 3:09 So if we go back to our stylesheet and right below the resorts and tips rule. 3:14 If we target the tips column. 3:20 Then we give it a float property. 3:25 And we make the float value the keyword, right. 3:28 When we save our style sheet and refresh the page, notice how 3:33 the div positions itself, or floats, over to the right side of its container. 3:36 And we can actually tell that it's taken out of the normal flow of the page, 3:41 since it's overlapping the footer content. 3:45 And we'll fix that in just a bit. 3:48 Now since the resorts div here above is still in the normal flow of the page, 3:52 it's taking up an entire line of content. 3:58 And if we bring up the Chrome Dev tools and inspect the div. 4:01 We can see how the remaining margin area of the resorts div is what's taking up 4:08 the rest of the line. 4:13 So, now, if we go back to our style sheet, and target that resorts column. 4:16 Then give it a float property, and this time, we're gonna float it left. 4:25 Now when we save our style sheet and refresh the page. 4:30 We can see how the resort div on the left is now taken out of 4:33 the normal page flow and placed along the left side of its container. 4:37 So now both columns are positioned on the same line. 4:41 So now we're seeing a common issue that happens when using floats. 4:47 Now if a block element contains floated children, it's height will collapse. 4:51 So here, we can see how the secondary content divs height has collapsed. 4:56 It doesn't expand to completely surround the floated columns 5:02 because the browser does not account for the height of the floated columns. 5:06 Remember, they're no longer positioned in the normal flow of the page. 5:10 And on top of that, 5:13 the content of the footer is starting to wrap around our columns. 5:14 So we need to fix this. 5:19 [BLANK_AUDIO] 5:20