Creating a Horizontal Navigation with Floats

Besides the simple example of wrapping text around images, 0:00 you can use floats to create entire web layouts. 0:04 For example, you can float the logo and navigation in the header, 0:07 the content columns in a container, or links in a footer. 0:11 As we learned in the previous video, by default, 0:15 browsers display content in the order that it's encountered in the markup. 0:18 But we can manipulate that order with floats. 0:22 Currently, the elements in the header are in the normal document float. 0:26 The site name and 0:30 navigation are stacked on top of each other as they appear in the markup. 0:31 In this lesson, I'm going to lay out the name and 0:39 navigation we used in the previous section using the float method. 0:41 That way you'll have a better understanding of how float layout works 0:45 compared to the inline and inline block methods you learned about earlier. 0:49 First, I want to place the site's name element over to the left of the header. 0:53 So, back in my stylesheet, inside the media query, 1:00 I'll create a new rule that targets the class name. 1:03 Inside the rule I'll add a float property and set the value to left. 1:13 When I go back and refresh the page, 1:20 you can see how the element floats to the left side of the header. 1:22 Notice how the navigation no longer honors the space the name element 1:27 used to take up on the page. 1:32 If I inspect the name element with the Chrome developer tools, 1:34 notice how the element appears to be inside the main navigation. 1:37 Similar to what happened in the previous video when I floated the image 1:41 next to the paragraphs. 1:45 And its width no longer takes up an entire line. 1:46 Now it's only as wide as its content. 1:49 Remember, the floated element is technically a block-level element. 1:51 But it's behaving like an inline element, and 1:56 any surrounding content flows around it. 1:58 You can also put several floats on the same line. 2:01 So to adjust this layout, I'm going to apply a float to the main nav element. 2:04 I wanna place the navigation on the right side of the header. 2:09 Back in my stylesheet, inside the media query and right above the name rule, 2:15 I'm going to create a new rule that targets the class name nav. 2:21 I'll give it a float property and set the value to right. 2:28 When I go back and refresh the page, we can see that both the name and 2:33 main nav element are now on the same line. 2:38 But the navigation items are still on separate lines. 2:42 To display a horizontal navigation, 2:47 I'm going to float the list items inside main-nav. 2:48 So back in my CSS, right below the main-nav rule I'll create a new rule 2:52 that targets the li elements inside main-nav. 2:57 Then I'll float them left by typing float: 3:02 left; So now the navigation 3:07 items are floated next to each other in the same order they appear in the markup. 3:12 Now notice what happens if I float the navigation items right. 3:18 So I'll go back to the main nav li rule and 3:22 change the float value from left to right. 3:25 Floating the list items right reverses the order of the navigation links, 3:32 because it pushes the very first list item to the right side of its ul container. 3:36 Then the other items float next to it in the order written. 3:42 I'll go ahead and keep my navs floated left moving forward. 3:46 So I'll just undo that and change the float value back to left. 3:49 With floats, we don't have to worry about the extra white space that can appear 3:55 when using inline or inline block display. 3:59 Floated elements will sit adjacent to each other 4:02 regardless of the HTML white space between them. 4:05 Now, I want some separation between each nav item, so I'll go back to my stylesheet 4:08 and apply a left margin to the list items inside main-nav. 4:13 So below the float declaration, 4:18 I'll add a margin-left property and set the value to 12 pixels. 4:20 The floats inside the header caused a common undesirable layout behavior you'll 4:30 likely face when using floats. 4:34 If a block level element contains floated element, its height collapses. 4:37 Notice how the header's height collapsed. 4:43 So its height doesn't fully expand to contain the floated site name and 4:46 navigation elements. 4:50 Now this isn't a browser bug. 4:52 It's just how floats are supposed to work in the browser, but this is a good example 4:54 of where you can get into trouble when using floated elements. 4:58 In the next video, I'll show you why this happens in float layouts and 5:01 how to prevent it from happening. 5:05