8.3 Floats - Video Tutorials & Practice Problems

<v Michael>Now that we've seen some of the things</v> to watch out for in the box model, let's start using it to style our site. In particular, let's take a look at these bio boxes and stack them horizontally instead of vertically, which is probably a better way to lay things out on the page. <v Instructor 2>Yeah, it's something</v> that you you find yourself wanting to do regularly on websites is, have boxes next to each other, and so now that we've looked at how sizing works with the boxes, and margins, and all that, let's kind of rearrange the content and put things next to each other. <v Michael>Okay, and our initial way</v> of dealing with this is going to be with floating elements, right? <v ->Right, and we used</v> a float in the HTML tutorial, and it's a pretty powerful tool, a CSS tool, but it has some real drawbacks to it which we'll get into in this section. <v Michael>Okay, well, let's take a look</v> at the CSS here. You wanna look at the bio style section again, and now we're gonna be adding styles to these bio boxes so that they end up being next to each other horizontally instead of vertically. We mentioned that we're going to be turning these into floating elements. So we can do that using float left or float right, there's no float center though, rightly. <v Instructor 2>Correct, this is one of the drawbacks.</v> <v Michael>Okay, let's save that and see what changes.</v> We're gonna add a padding too, but... Hmm. Doesn't seem to do anything. Do we know why that didn't do anything? <v Instructor 2>No, go back to it.</v> Refresh again. <v ->Yeah.</v> <v Instructor 2>That's strange.</v> Oh. (Second instructor laughs) It's because of this. <v ->Oh, the width is 50%?</v> <v ->Yeah.</v> <v ->Is that it?</v> <v ->Yeah.</v> So- <v ->Oh okay.</v> <v Instructor 2>Right now what's going on</v> is that it's taking up when you add the borders in, that are around the boxes, because we don't have box sizing set to border box. <v ->Oh right.</v> <v ->Those borders</v> are being drawn outside of the 50%, so that- <v Michael>Which is just a little over 50%.</v> <v Instructor 2>Yeah so everyone,</v> in case you're wondering how the box model can cause problems and heartache. <v ->Yeah.</v> <v Instructor 2>This is exactly why.</v> So each one of these boxes is 50%. So two of them is a hundred percent, and then you add in the borders on top of it, and now it's breaking down onto a new line. And so Michael and I are looking at this and wondering, "Wait, why aren't any of these floating?" And there you go. <v ->They are floating</v> <v ->Yeah, they are.</v> <v ->So if we get rid</v> of the border, it should stack them, right? <v ->Yep.</v> <v ->Yeah, there we go.</v> That's wild. Okay, so because it is basically 50% plus one pixel but that's enough to break it onto the next line. <v ->Exactly.</v> <v ->That's amazing.</v> <v ->So let's make it 25%</v> since we have four of them. <v ->Make it it 25%,</v> we should have four. <v Instructor 2>Yeah.</v> <v Michael>Across, but that's still not right,</v> because it's this issue with the border, right? <v Instructor 2>Exactly,</v> and you can also see the problem with floats in that the the last box is in the middle, and that's because it's floating down past the content, <v ->Oh yeah.</v> <v ->of the one on the left,</v> so you get these weird problems with floats where things look very jumbled. <v Michael>Okay, how do we fix that?</v> <v ->So-</v> <v ->How do we get it</v> so that they just are on the row. <v Instructor 2>The way that we learned</v> in the previous sections we're gonna change this to box sizing border box. <v Michael>Okay, so there's one more thing,</v> we want a little bit of padding between these. So let me add that in. We are doing a 2% padding. So we see here, we can use this percent for padding. It's not just for width. Okay, so that gives us a little bit of extra room inside of each box, but we still have this problem that they're too wide. I guess these four together are more than a 100%, so this one is floating down. Even though each one of them is 25%, basically we've got an extra border and we've got extra padding. Right. <v ->Mm-hmm.</v> <v Michael>Okay, and the solution to that,</v> we could try to do some complicated math I suppose, but the easy solution is just to say, "Let's have the padding and the border be inside the element." And that's box sizing border box. <v ->Correct.</v> <v ->This is great.</v> I really didn't know about this at all. Let's take a look at that, see if they'll fit now. But with that, they just fit perfectly, and that's because we've got four boxes, each of them is 25%. So we add those up and it's a 100%, and because of the box sizing border box, then the padding and the border are included in that calculation. <v Instructor 2>Yeah, exactly.</v> They're subtracted from that. They're on the inside of the box. <v Michael>Right.</v> All right, so this seems like it's working. Why might a developer not want to use floating to get elements to line up side by side like this? <v Instructor 2>Well, the problem that we saw</v> when we first got the floats to work, where the last box was below and kind of in the middle of the whole row of boxes, <v ->Mm-hmm.</v> <v ->that's the problem,</v> which is that when you float elements, you're taking them out of the flow of the page, and so you get these very weird problems where the browser doesn't know where the content should be ending, and so you get this very jagged layout, and we can actually illustrate this with an example by adding some text in below our bio boxes. <v Michael>All right, so we're gonna just paste this in.</v> I'm gonna copy and paste it from the tutorial. And we wanna put this underneath the bio wrapper. <v Instructor 2>Underneath the bio wrapper.</v> <v Michael>Yeah, right here.</v> Let me take a look. I just used the sublime text ability to collapse that down. You can see there's very subtle ellipses here indicating various content. <v ->Very subtle.</v> <v Michael>So put that in, and we want</v> to indent it one level, and now I'll restore this here. It's a code folding there, it's that feature. All right, so let's save it and take a look. <v Instructor 2>And we'll see how bad this looks.</v> And it looks pretty bad. <v ->Yeah, that's a mess.</v> <v Instructor 2>So you can see the browser</v> isn't quite certain where the end of that bio wrapper is that's holding all these bio boxes, and so it's trying to flow the rest of the page content around these floated elements, which doesn't look good. <v Michael>Now there's one way to handle this with</v> CSS clear, in this case clear left, how does that work? <v Instructor 2>So there is a CSS property called clear,</v> and it has a few values. One is left, one is right, and then there's both. And what it does is, if you use clear left, then any float left will be ended. <v ->Okay.</v> <v ->So what that means is</v> that on that paragraph it sees that right before the paragraph there are some elements that have clear left applied to it and it says, "Okay, we're now stopping any floating, and we're starting this new line as though this is like a new block element." <v ->Yeah.</v> <v ->So it's on it's own line.</v> So if you were to change that to clear right, it wouldn't do anything. Because that only will affect... That's only looking for float right. And you can also use clear both. <v Michael>Right, but it's because it's a float left</v> right here. <v ->Right,</v> so it has to match, or you have to use both. <v Michael>So we do this here.</v> <v Instructor 2>Right.</v> <v Michael>It seems a little inelegant though</v> having to put the style on a particular paragraph. <v Instructor 2>Right, yeah.</v> Having to put a style on an element that comes after the floated elements and it's in like a totally different module, right? Let's think about the bio boxes and the bio wrapper as like one piece. <v ->Right.</v> <v ->Like you kind of want</v> all of that content to be self-contained, and be able to drop it in anywhere on the page and not have it affect other content that's on the page. So there is another way we can clear these floats and we can actually apply this styling to the bio wrapper. <v Michael>Right, which makes more sense.</v> <v Instructor 2>Right, and then that'll contain</v> the bio boxes inside of it. <v Michael>Okay let's do that.</v> Yeah, this way the styling that handles this sort of behavior is self contained. It's all contained in the bio wrapper. <v Instructor 2>Exactly, and so this way you'd be able</v> to cut and paste everything that's in this bio section, and put it on another page and you wouldn't have to worry about it disrupting the flow of content, so what we're using here is the overflow hidden method. <v Michael>Right, I haven't seen this before.</v> <v Instructor 2>Right, and-</v> <v Michael>I mean, I saw it when I edited this, but-</v> (second instructor laughs) <v Instructor 2>What's important to note here is</v> that overflow hidden is being applied to bio wrapper, and there's no height. If there were a height there we'd have a totally different behavior, which we'll actually take a look at in the next section. <v ->Hmm.</v> <v ->But when there's no height</v> and overflow hidden, what happens is it clears floats. <v Michael>What is overflow in this context?</v> <v Instructor 2>So overflow is a CSS property</v> that tells the browser how it should treat elements that have long content. That might not make sense, but if you've ever gone to a webpage where you see a little box and you can scroll inside of a box, inside of a larger webpage, that's a usage of the overflow property being set to scroll. <v Michael>Ah, yeah, we actually have an example</v> of this here. I think we have a... You fiddled with an Amazon menu using the inspector. <v Instructor 2>Oh, that's overflow hidden there.</v> <v Michael>Oh so this is-</v> <v Instructor 2>So this is what happens</v> if you have overflow hidden, and there's a height set. We'll discuss this in the next section. <v Michael>Okay.</v> <v Instructor 2>Yeah, you don't wanna have a height set</v> because it will actually cut off the content. So when you set something to overflow hidden, it's saying, "Okay, if there's too much content here, just don't show it." But when you don't have a height set, what it does is it resizes the whole wrapper, the bio wrapper, to contain all of the content. I know this doesn't make a whole lot of sense. You'll see in examples and diagrams when we go over it in the next section- <v Michael>It's just kind of like filling this</v> in then somehow. <v Instructor 2>Right, so what it's doing is,</v> it's expanding the the bio wrapper down to the bottom of the tallest element. <v Michael>Okay.</v> <v Instructor 2>And you can actually see this</v> if we were to add a background color to bio wrapper. <v Michael>Yeah, I was gonna say.</v> Dude, I think we covered this a little bit more. <v Instructor 2>Yeah we'll get-</v> <v Michael>Oh, that's the next section, right?</v> <v Instructor 2>Yeah, it is the very next section.</v> So we can wait for that one. <v Michael>Yeah, I got it.</v> Yeah, so I'm right to be a little confused 'cause we're actually going to cover that in more depth. <v Instructor 2>And it is a confusing thing,</v> because it's actually a little bit of a hack, the overflow trick to clear floats. This was not the intended use of overflow in HTML. <v ->Okay, I got it.</v> <v Instructor 2>It just happened to work this way</v> based on the rules that were set up for what overflow should do. <v Michael>I got it.</v> So that's why it doesn't make a whole lot of sense in terms of the language we're using, like why does overflow hidden have this effect? And it's because it's kind of a side effect of other properties. <v ->Exactly.</v> It's a side effect that the browser makers aren't gonna get rid of, because it actually does have real purpose. <v ->Right.</v> <v ->But because</v> it'll hide content if this bio wrapper had a height set to it in fact in just a little preview of what we'll be covering in the next one, like Michael add like a hundred pixel height to it. So it cuts everything off. <v Michael>Oh wow.</v> <v Instructor 2>So you can't always use this overflow trick</v> to clear a float, because sometimes you want to give a height to an element and still also have the floats cleared. So there is another method here that we can use. <v Michael>Ah, yeah. I see that.</v> <v Instructor 2>Which is the after method,</v> and this is also something that we're gonna talk about later. Yeah, in a much later section about what this after does, but this is something that's called a pseudo element, and it's kind of a pretend element that is getting stuck into the bio wrapper by the browser. And these pseudo elements are actually in every single element that's on the page. You just don't normally see them or interact with them. <v ->Okay.</v> <v ->And so what-</v> <v Michael>Let me see how this works here.</v> <v Instructor 2>What we're actually doing in this is,</v> we're taking this kind of pretend element and we're adding clear both to it, and because this pretend element comes at the end of the content, that's what after means. <v ->Ah yeah.</v> <v ->Then what's happening</v> is it's clearing all the floats for us. <v Michael>Right, I'm just adding one rule at a time</v> from our example to see what they do. <v Instructor 2>They're not gonna do anything.</v> So yeah. None of this will be shown on the- <v Michael>Well eventually it'll it'll work, right?</v> <v Instructor 2>Right, but you're not</v> gonna actually see anything. Like it's not an element that's gonna pop up because we'd have to do some other stuff to it. <v Michael>But it should start clearing this, right?</v> <v Instructor 2>Right, as soon as you add clear both,</v> it will clear it. <v Michael>Okay.</v> (instructors chattering) So that cleared it, and so what does height zero do? <v Instructor 2>Height zero is just there</v> to make sure that it takes up zero space on the page. <v Michael>Okay, will this change anything here?</v> <v Instructor 2>Nope, it won't change anything,</v> but it could change things. So it's one of those- <v Michael>If it inherited from something.</v> <v Instructor 2>Exactly, so it's better to just cover</v> and make sure that it's taking up zero height, zero space, zero line height, yeah. <v Michael>So if this were something,</v> what if we had this and commented this out. <v Instructor 2>It's actually more of the line height,</v> so. <v ->Okay.</v> <v Instructor 2>Yeah, it's not that it's inherited,</v> 'cause height doesn't get inherited through, <v ->Oh, okay.</v> <v ->through elements.</v> It's more that, you want this to not take up any line height space. <v ->All right. No text.</v> <v ->Yeah, there you go.</v> <v Michael>Okay, so this is using this pseudo element.</v> It's basically just something that's sort of a mysterious thing after this div. <v Instructor 2>There's actually another pseudo element</v> that's visible on the page right now. <v ->Hmm.</v> <v ->And this is one</v> that people don't really know about until you tell them, but the links that are in the hero, <v ->Yeah.</v> <v ->so these right here?</v> <v ->Right.</v> <v ->The bullet points</v> are pseudo elements. <v ->Oh interesting.</v> <v ->So that's the</v> before pseudo element, and that's where the bullet point is being rendered, is inside of that pseudo element. And again, we're gonna talk about this in a later section, and we'll get really in depth with this, and actually use it to insert content onto the page. <v ->Yeah.</v> <v ->Because it's</v> a very powerful tool in styling a page. But for right now we're just using an empty pseudo element with zero height, zero width, and with clear both set so that we can clear these floats. <v Michael>All right. Well, so this is good for now.</v> We're gonna talk more about this after pseudo element but this is a nice tool to have in our toolkit, right? To be able to clear this text after the float. <v Instructor 2>Yep.</v> <v Michael>Cool.</v> Yeah, this is definitely the kind of thing that I did not know how to do, and it is a pain. I mean, it's like, "Darn it, things aren't working on the page the way I expected them to." (Instructor 2 laughs) But this is nice, so now we've got four boxes across and then we've got text that's just being cleared from where it was before. <v Instructor 2>Exactly.</v>