Clear Fixes7:12 with Nick Pettit
In this video, we'll learn several different techniques for clearing floated elements. In a layout with multiple columns or floated images, it's important to clear the parent container.
[?mellow guitar music?] 0:00 [Think Vitamin Membership - Est. 2010] [membership.thinkvitamin.com] 0:02 [HTML & CSS: Clear Fixes with Nick Pettit] 0:06 In the previous video, we created a fixed width layout with multiple columns. 0:11 However, we have a very common problem with this layout 0:16 and in this video we're going to learn several different ways to fix it. 0:19 Here we have a very basic fixed width three-column layout 0:23 that we've already created. 0:27 Now, you may have noticed that our wrapper div is not actually encapsulating 0:29 our three column layout. 0:35 We need to fix this using what is called a clear. 0:37 Now, there are several techniques for clearing these floated columns, 0:41 so let's start going over them. 0:46 I'm going to switch over to TextMate, and the first one is actually pretty simple. 0:48 We're going to add a new div just below our columns here 0:55 and we're going to give it the class="clear"> 1:01 and we'll go ahead and close that div and put nothing inside of it. 1:06 We're going to switch over to our CSS, and just after our body selector here, 1:11 we can go ahead and put in this clear class 1:18 and we're going to use the clear property and give it the value both. 1:22 Now, when we switch over to Google Chrome and refresh the page, 1:28 you can see that orange has filled in between our columns 1:33 so our columns are actually inside of our wrapper div now; 1:37 at least according to the renderer. 1:41 There are several other techniques to do this and this one actually isn't really the best; 1:44 however, you can get away with this technique if you have some sort of footer 1:48 just below your columns and you plan on putting additional content there. 1:55 So let's go ahead and switch back to TextMate and try out a different technique. 2:00 We're going to go ahead and remove our clear both and save that 2:05 and we'll go ahead and remove our clear div. 2:11 So when we switch back to Google Chrome, our page should look just like it did before, 2:14 where there is no orange filling in between these columns. 2:19 So let's go ahead and try out this next technique called overflow. 2:23 So we're going to go ahead and go to our CSS and on our wrapper div, 2:28 we're going to add the overflow property 2:34 and we'll give it the value auto. 2:38 Now, when we switch back to Google Chrome and refresh, 2:41 we should see the same result we had before where our wrapper div 2:44 is encapsulating our columns. 2:49 The next technique involves wrapping our columns in a secondary wrapper div 2:53 and you can call this something else, like the content div 2:58 or the main div, so let's go ahead and try that out. 3:02 We're going to switch back to TextMate, remove our overflow: auto; 3:06 and we're going to switch over to our HTML, and inside of our wrapper div, 3:10 we'll create a secondary nested div that's going to wrap everything. 3:17 We'll call this div "content" 3:22 and we'll go ahead and close that 3:27 and we'll just indent everything inside of it so that we know it's nested inside of this secondary div. 3:31 And then, we'll switch over to our CSS and go ahead and style this content div. 3:38 So let's go ahead and scroll down here. 3:46 First, we'll go ahead and float our content div to the left 3:50 and we're also going to set an explicit background of orange 3:55 and although this isn't actually part of the technique, 4:01 setting the background to orange will help us see this content div inside of our wrapper div. 4:04 So we're going to switch back to Google Chrome and refresh, 4:10 and we should see no change whatsoever. 4:17 We should still see that our columns are inside of our wrapper div. 4:20 By containing them in this secondary wrapper div or content div, 4:24 our secondary wrapper div takes up the entire width of our regular wrapper div 4:31 and by floating it to the left, it sort of resets the flow of the page 4:37 and puts our columns inside of it. 4:41 So let's go ahead and switch back to TextMate and just remove the work that we did here 4:45 so that we can try one last technique. 4:51 We're going to go ahead and get rid of this content div 4:54 and we'll just reset all of our HTML there 4:59 so that it has proper indentation, so we'll save that out. 5:06 Let's just go ahead and switch back to Google Chrome and refresh 5:10 to make sure that we're in the right place here. 5:14 And as you can see, our columns are not inside of our wrapper div 5:17 because that orange is not peeking through the gaps between the columns. 5:21 So let's go ahead and switch back to TextMate and try this last technique. 5:25 For this, we actually don't need to add any additional markup. 5:30 This is a little bit of a hack, but it's actually one of the best techniques. 5:34 We're going to go ahead and select our wrapper and then we'll apply the pseudo-class :after. 5:43 Then, we're going to use the content property and just give it the value of an empty string "". 5:52 What this is going to do is it's going to put a pseudo-element after our wrapper 6:01 and inside of it, it will just have no content. 6:06 Next, we can go ahead and style this pseudo-element. 6:10 We're going to go ahead and set the visibility to hidden;. 6:14 We'll set the display: block;. 6:23 This element needs to clear both the left and right sides 6:26 and we'll set a height of 0. 6:33 So basically, this element won't appear in the renderer, but it is there 6:36 clearing the columns, so we'll go ahead and switch back to Google Chrome 6:42 and refresh the page, and there, you can see our wrapper div 6:47 is in fact extending all the way to the bottom of these columns. 6:51 That about wraps things up for clear fixes. 6:56 The last technique I showed you is preferred; however, it won't work so well 6:59 in older versions of Internet Explorer. 7:03 Clear fixes can be tricky, so you should do extra cross-browser testing. 7:05 [?mellow guitar music?] 7:09 [Think Vitamin Membership - Est. 2010] [membership.thinkvitamin.com] 7:10
You need to sign up for Treehouse in order to download course files.Sign up