8.4 A little more about the overflow style - Video Tutorials & Practice Problems

<v Narrator>In the last section</v> we saw how to use the overflow: hidden declaration to clear this float here and put the text down here. Let's remind ourselves of how that worked. So it was, let's see, it was an alternative to this after pseudo element. So let's just remind ourselves. Actually, let's comment this out. This is what it looks like when it's not being cleared. And then, if we do this, remember, this is just a side effect of overflow: hidden. And I don't really understand this, so let's talk more about this. How does this overflow property work? What is its purpose? <v Narrator>Right, so we've talked a bunch of times</v> about how on a page all of the content is arranged into a series of boxes. And oftentimes, what'll happen is you'll give dimensions to one of those boxes that holds content, and then you'll have content that is bigger than the box. So there's more... If you set a height and a width on something and then you have more content than what fits in the box, the browser needs to know what to do with that extra content. So, there's actually a picture from Amazon or from Facebook you have of this. And you've probably seen this before. <v ->Oh, yeah.</v> <v ->Where you have a little box</v> and there's a scroll bar, and then you can scroll up and down inside that scroll box. <v Narrator>Right.</v> <v Narrator>So that's the overflow property.</v> And it's powerful, because it determines how your content gets shown. And understanding how this works is fairly important. So it's worth stopping here and taking a look at how this actually goes. <v ->Okay.</v> <v ->So, there's a few values</v> that the overflow property can take. And there's another diagram that shows what these are. <v ->Yeah.</v> <v ->That's the one.</v> So there you go. And also, how it relates to floated elements. <v ->Right.</v> <v ->Right.</v> So, when you have overflow: hidden set to something with a height, we looked at this in the last section, it cut things off. <v ->It just cuts things off.</v> <v Narrator>And if there's no overflow and no height,</v> then the floated element just kind of goes out of the box, which is the left most example there. <v Narrator>Right, and that's why this works here,</v> this overflow: hidden. <v Narrator>Right.</v> So, if you have no height, it resizes the whole wrapper to contain the floated element. And the reason is that you're telling the browser that anything that's outside of the wrapper should be hidden, but you're also not defining any boundaries for the wrapper. So it expands the wrapper to grab all the content. Does that make sense? <v ->Oh, I see.</v> And that's why it pushes out the text here, is that right? <v ->Right, right.</v> So it's actually pushing that that bio-wrapper down so that all of the content is inside of it, because it's trying to draw a line around the content and say, anything outside of this line is gonna be hidden. But because you've given it no height, it just ends up pushing everything down. <v ->I see, yeah.</v> When we look at this scenario here where the text is inside here, that would be like if the text were in here. Then if we say overflow: hidden with no height, the wrapper expands and it pushes out that text so it would be down here. <v ->Exactly, exactly.</v> <v ->Got it.</v> <v Narrator>It's just a weird quirk of how it was set up,</v> but it means that we can use it to clear floats. <v ->Yeah. But that's not what we want.</v> Let's just restore this. We're not gonna be doing that, but we will play with this overflow in the bio-wrapper. <v Narrator>Right, exactly.</v> So, let's actually set a background color so that you can see how all of this works. <v Narrator>Okay.</v> <v Narrator>Makes it a little easier to see</v> where the boundaries of the wrapper are. <v Narrator>What's the difference between background</v> and background color? <v Narrator>Background is actually a compound property</v> that can take a bunch of different values. We haven't really talked about that yet. But border is an example of that, where you have border, 1px, solid, and black. Oh, go back to the CSS. <v Narrator>Yeah.</v> <v Narrator>So the border style on the bio-box,</v> see how there's three different values that are set to it? <v ->Oh, this one here?</v> <v ->Yeah.</v> So, that's actually a compound style. So that's- <v ->Ah, okay.</v> <v Narrator>The one pixel is border width</v> and then that one is border style. I have to double check that. And the last one is border color. <v Narrator>Oh, I get it.</v> So how does that relate to background color then? <v Narrator>So if you use background,</v> you can actually set a bunch of different things. <v ->Oh, okay.</v> <v ->Whereas background color</v> just changes... The only thing that it can alter is the background color. <v Narrator>Oh, oh, I see.</v> So, we could have other stuff here in the background. <v ->Exactly.</v> You could set a background image, you can set background sizing. There's a whole bunch of different things that you can do. <v Narrator>Okay.</v> Would it work to do this, if we just said background? <v ->It would. Same thing.</v> <v ->Okay.</v> <v ->I like to use-</v> <v Narrator>But here it's a little bit more specific.</v> <v Narrator>Right, I like to...</v> Exactly, to be more specific for that, just so that you're not messing something up. <v Narrator>Right, okay.</v> So, let's take a look at adding height as well. Say 300 pixels. Right, so now the height of this is 300, right? <v Narrator>Right, so now you can see that we're clipping,</v> it's cutting off the bottom part of those bio-boxes. <v Narrator>Right, so here...</v> Ah, I see, so now it's actually just the largest one sets the size. <v Narrator>Right.</v> <v Narrator>And here, just like that.</v> <v Narrator>So this is overflow: hidden,</v> and this is a great way to keep content inside of a wrapper element on a page. If you don't know how big it's gonna be and you don't want it to mess up the page, you can always set a height and overflow: hidden. And the browser will just cut off anything that's below. <v Narrator>Okay.</v> <v Narrator>But you don't always want that to happen.</v> Sometimes you want that content to be seen. So you can also set overflow to visible. <v Narrator>Right.</v> <v Narrator>And with this height set,</v> you're gonna see a very odd look, which is- <v ->Oh yeah, that's weird.</v> <v Narrator>You see the content flows out of it,</v> and at the same time, the wrapper stops. So that green background stops before the content. So technically, we're messing with the the overall flow of the page here. <v Narrator>Why is the text up here now?</v> <v Narrator>It's because the content is pushing down.</v> <v ->This here?</v> <v ->Mm-hm.</v> <v Narrator>All right, well, so that explains why</v> the text is up here. There's something else that we should take care of while we're here. We just noticed this, that there's an exercise that changes these links to have the social... What is it? Social links class? <v Narrator>Yeah, social link class.</v> <v Narrator>Okay, social links. So we wanna change these.</v> Let's just add this here. <v Narrator>Right.</v> <v Narrator>Take a look at that.</v> <v Narrator>There we go.</v> <v Narrator>All right, so this is overflow visible.</v> There's one more that's important though, right, Lee? <v Narrator>Right, there's overflow: scroll.</v> <v Narrator>Right, and we mentioned that briefly before,</v> so let's take a look at what that does. Oh, there's another thing we missed here, which is actually in the text in a previous section. There's a width of 36 pixels here too. And this is kind of a precursor. You can see, these are both 36. Eventually, this will be a sphere, right? Or like a circle. <v Narrator>Exactly.</v> <v Narrator>So that these are the same width and height</v> is actually kind of a bit of foreshadowing. All right, well, so let's take a look at what the effect that has here. Ah, yeah. Just a little bit wider. And here, the inline-block display setting is important, right? Because without it, we wouldn't be able to change both of the height and the width. <v Narrator>Right, it wouldn't be applied at all.</v> <v Narrator>Right.</v> Okay, so we were talking about this overflow setting. We have the overflow: visible, and there there's the one more though, there's the overflow: scroll. <v Narrator>Right.</v> And so, when we set this, it'll... Yeah. Change the page. <v ->Oh, look at that.</v> So here, it's scrolling inside this little box. <v Narrator>Exactly.</v> <v Narrator>Yeah.</v> <v Narrator>Which is a nice way to both hide content</v> and still make it visible on a page. But let's reset all of these styles and we'll just use overflow: hidden and remove the height for the bio-wrapper. <v Narrator>Okay, so what do we wanna do there?</v> <v Narrator>So we can get rid of the whole after-</v> <v Narrator>Oh, really? We're just gonna get rid of this?</v> <v Narrator>Yep.</v> We'll just use the simple overflow: hidden. <v Narrator>Okay, we'll use this here.</v> <v Narrator>And remove the height.</v> <v Narrator>Right.</v> <v Narrator>And we don't need the green color</v> as the background either. <v Narrator>Right.</v> <v Narrator>And so, now our page is just...</v> There we go. <v Narrator>Cool.</v> <v Narrator>So this isn't the only way</v> that we can put boxes next to each other. There's actually another way that we can have this type of layout. And that's using the inline-block that we learned about at the beginning of this section to style these boxes in a way where we can have them sit all on a line together. <v Narrator>Right, and we'll be covering that technique</v> in the next section.