7.4 Percentages - Video Tutorials & Practice Problems
Video duration:
13m
Play a video:
Video transcript
<v Michael>Now that we've taken a look at pixels,</v> which give us a way of specifying the size of things in absolute terms, we're gonna talk about a couple of important ways of talking about sizes that are relative to other things on the page. And the first one is percentages, which we've looked at briefly already. But these are really important for a variety of cases, but percentages can be a little bit complicated. So, Lee, we talk about, in the text, a few of the catches related to percentages. <v Lee>Right.</v> So, the thing that you have to remember is that the percentage sizing is based on the container that the element is in. So when you lay out a page, you need to be aware of how big things are going to be, and how small they're gonna be. I guess that's the thing that I wanna make clear. So, you can get in a situation where you have content on the page that gets squished down uncomfortably small, if the whole browser gets made smaller, or for some reason one element is smaller, because if you have something that's only taking up 10% of it, and then you make everything smaller, everything gets squished. So you just have to pay attention to where you're using it. The other thing is that percentage heights are a little weird. They don't always work quite right. It's complicated why that happens. But it's because, while a percentage width can be unset... So, I can make something that takes up 50% of the width, and you don't need to set a width for the parent container. Heights don't work that way. You have to set a height on the parent container. So you'd have to say, like, the parent container's 200 pixels and then the child can be 50%, and it'll actually be 50% of the height. It's just a weird caveat of it. And then the other thing, and we won't really cover it here, but we mention it in the text, which is that you can use percentage for fonts, but it works pretty much just like the em. So, we probably aren't gonna really go over it right now, just because it is just like the em, but nobody uses it really for this. <v Michael>Okay.</v> <v Lee>But the caveat that you have to watch out for</v> is that it's multiplicative. So, if you have a set font, and then you have, inside of that, a child that says, like, 150%, and then inside of that you have another child that's 150%, the last child is gonna have absolutely huge font, because it's multiplying it twice. <v Michael>All right. I'd definitely like to see</v> some concrete examples of this, 'cause I'm not entirely clear still on exactly what everything means here, with respect to percentages. So, what we're going do here is introduce a new div that wraps all of our bio content. So, this a common theme that we'll continue to develop in this tutorial, which is adding wrappers. And we'll give it a class. And what's the class here? It's a bio wrapper. <v Lee>Mm-hmm.</v> <v Michael>And let's indent this here.</v> And we're gonna do everything here, all of these divs, down to here, right? Oops, I should have clicked it differently. <v Lee>And the reason we're wrapping this right now</v> is because we're gonna set percentage values for the width of the bio boxes, but they need to be inside of something so that we can control those widths. Otherwise, if they're not inside of something, it's just based on the next parent container, which in this case, would be the body, I think. <v Michael>Okay.</v> <v Lee>And at that point,</v> you know, you don't wanna make the body of the whole page bigger or smaller, just for one small aspect of the page. <v Michael>Right.</v> Okay, so we've got a width of 200 pixels here. We're gonna change that to 50%. And we haven't set the width of the bounding box, so let's take a look at this. This is a 200 pixels right here now. <v Lee>Mm-hmm.</v> <v Michael>These boxes.</v> So, this is now 50% of the page, but what happens if we put in a wrapper here? So this goes up here, right? <v Lee>Mm-hmm.</v> <v Michael>Then the dot for the class,</v> and then our example is a width of 500 pixels. And so, that should mean the bio boxes have a width of 50% of that, which is 250 pixels, right? <v Lee>Correct.</v> <v Michael>Oh, look at that.</v> <v Lee>And they're squished.</v> <v Michael>Yeah. They are squished.</v> You mentioned something about how things could get too squished. How does that scenario work? <v Lee>Well, actually, a good example would be</v> to command out the width of the bio wrapper. <v Michael>Okay.</v> <v Lee>And now save it,</v> and when you refresh, the bio boxes will go back to taking up 50% of the space. But now decrease the size of the browser. <v Michael>I'm gonna put it in a new window,</v> 'cause I don't wanna lose the size of this thing here. Oh, right. <v Lee>And now keep going, though. Keep going.</v> <v Michael>Oh they really get squished.</v> <v Lee>Keep going.</v> <v Michael>Oh, man.</v> <v Lee>Oh, this is Safari's limit,</v> but some browsers go even smaller than that. And so, you could get to a situation where you have, like, one word on every line, and it just gets squished way down. <v Michael>Right.</v> Whereas, if we have a fixed width here of 500 pixels for the wrapper... <v Lee>Right.</v> <v Michael>It looks like it's pretty much the same.</v> <v Lee>Well, it doesn't change.</v> <v Michael>Oh, I see.</v> No, it looks the same because that's just how small it is. <v Lee>Right, right.</v> <v Michael>But it's not a percentage. I see.</v> Yeah, so now we resize it and it actually doesn't change. <v Lee>Exactly.</v> <v Michael>I got it.</v> <v Lee>So, you have a lot more control</v> when you use a wrapper. <v Michael>Yeah, I got it.</v> Oh, I see, and that is our example in the text, we actually do just get rid of the style declaration there in the bio box, or for the wrapper. Just as a demo, we commanded it out like this, but equivalently we can just get rid of it. <v Lee>Right.</v> <v Michael>So this just goes to show that-</v> <v Lee>And the styles are valid.</v> It's not gonna break anything, but I mean, you just don't want to keep junk in your CSS file. But if you need to, just because you're gonna change something in the future or you're just making a little spot to remember that you need to style something, it's not gonna break your CSS. <v Michael>Got it.</v> <v Lee>Just a good thing to know.</v> <v Michael>For sure.</v> And now our next example talks about the height, and you mentioned that this is pretty tricky, so let's put it in. <v Lee>Right.</v> <v Michael>We actually have just a sample div.</v> <v Lee>Exactly.</v> <v Michael>We'll delete this at the end of the section,</v> but this is just to get a sense of how things work. So where does this go in the file? Oh, it's right above the 'I'm an h1', so just inside the body. <v Lee>Mm-hmm.</v> <v Michael>And we're gonna use inline styles here,</v> just because... <v Lee>We're deleting the whole thing.</v> <v Michael>Yeah, 'cause we're gonna delete it anyway.</v> This is actually a good example. It's okay to use inline styles, especially if you're just going to do something like this that's quick and dirty, and it's not worth the overhead of hoisting it into the style sheet here. And as we'll see later on, of course, we'll be factoring this into a separate file. And again, sometimes it's nice just to be able to do it in the same file, and then when you've got the CSS that you want, then you can put it into a separate file. So, this is the style equals, and we'll just put it in so... It's got a border. Solid black, but we'll use the hex. <v Lee>Mm-hmm.</v> <v Michael>The more compact notation, zero zero zero,</v> it's all zeros. And then, I guess we're actually just, we can omit this space. I would probably put it in, but the example in the text doesn't have a space, and it doesn't matter. I know, I know, I like spaces. Ah, so you can see my habits there, putting the space. So, and a height of... Oh, yeah, we actually get rid of all those spaces, don't we? That's interesting. This is a good example. I mean, this is driving me crazy, because our example in the text is missing the space here, but it doesn't matter. You don't need the space, the colon's enough. So this is actually a good chance for me just to take a deep breath and not worry about it, especially since we're about to delete it. <v Lee>Yeah, exactly.</v> And so, before you refresh the browser after you're done with this... <v Michael>Okay, yeah.</v> <v Lee>We'll just talk.</v> <v Michael>Okay.</v> <v Lee>So, this test div is sitting inside of the body,</v> and if you switch back to the page, there's a decent amount of content here. Right? Like, it stretches down the page a good distance. You would expect then, that if you go back to the code... <v Michael>Right, if we say 100%.</v> <v Lee>100% height,</v> that it's gonna be a 100% of the height of the window. So then everything should double. The whole browser window should be pushed down by this. <v Michael>Yeah, once you save it...</v> <v Lee>But now when Michael saves this and refreshes...</v> <v Michael>Oh, wow.</v> It's just a little one up here at the top. <v Lee>Right. So the reason for that</v> is that it's not being passed a height by its parent. <v Michael>'Cause it's parent is the body tag in the case.</v> <v Lee>Its parent is the body,</v> and there's no absolute value on the height of that, and percentage heights need a height to work off of. It's a weird thing. Otherwise, it just fits it to the content that's within the element that it's on. <v Michael>So we can do something like this, though.</v> Put in the body tag with a particular height, say, 800 pixels. So, now this should be another 800 pixels, right? <v Lee>Mm-hmm.</v> <v Michael>Is that right?</v> Yeah, look at that. <v Lee>There you go.</v> <v Michael>So if we scroll down, we can see.</v> <v Lee>So just a weird little caveat with it.</v> It's just one of those things where you'd imagine it would work one way, and then you try it and it doesn't. <v Michael>Right.</v> So apparently, this can get quite complicated. <v Lee>Yes.</v> <v Michael>We have some examples.</v> It seems like there are strange interactions between the percent height and other elements on the page. <v Lee>Yeah.</v> It doesn't always work exactly like you'd expect because it's not basing it on the window. Like, a lot of times, if you just had an element on the page, in the middle of the body, you would expect it to be based off of the dimensions of the window, but it's not. It's always looking for parent elements. <v Michael>Okay.</v> <v Lee>And because of that,</v> you get weird interactions where, like, say the parent element has a bunch of padding on it, then the height of your element that's inside of that, is gonna include the padding, as well as the height of the object. It gets a little crazy, so. <v Michael>Okay.</v> So do people typically not use percentage for heights? Do they avoid that and use alternatives? <v Lee>Yeah, typically.</v> <v Michael>Okay.</v> And so, we'll be talking about those then, right? <v Lee>Right, yeah.</v> We have some more examples of some other measures that are used. And also, just in general, you'll find yourself not using height values a whole lot. And the reason for that is that, with the web, when you constrain something's height, if for some reason the width of it gets smaller, the way that we squished these boxes... <v Michael>Mm-hmm.</v> <v Lee>If the height were constrained,</v> the text would push outside of the box. So a lot of times, you create stuff where you don't want to set height for it, because you don't want the content to break the box. <v Michael>Got it.</v> <v Lee>It's something we'll look at in the future,</v> when we talk about overflow, is what this is called. So, the times that you actually need to set a height for something, you tend to want to be more precise, because you're actually creating something where you wanna know that it's always gonna be these dimensions, so that it doesn't cause a weird layout. <v Michael>Okay.</v> <v Lee>Yeah.</v> <v Michael>So, would you say that generally,</v> percentages are most commonly used in widths? Is that right? <v Lee>I would, yeah.</v> <v Michael>Okay.</v> <v Lee>So, a lot of times when you're designing things</v> that will maybe be used for mobile, or something like that, where, like, you might want a responsive design that can be on a variety of screen sizes, you'll use a percentage to just say, I want it to take up half the screen or half the space. <v Michael>Okay. And there's one more comment that we made</v> in the text about the usage of percentages for fonts, and we mentioned this briefly at the beginning of this section. So, we were talking about how, technically, you can use percentages for fonts, but people generally don't, because they're essentially equivalent to ems, which are really more designed for that. <v Lee>Right. 'Cause it's not based on...</v> There's another weird thing where it's not based on the size of the container. So when we changed this body, the body on the page, to be 800 pixels like this, if you gave a font that was in here a height of 100%, it wouldn't be 800 pixels tall. It actually bases it off of whatever the font size is for the parent container. So in this case, it would be whatever the font size is for the body, which, because we haven't set one, it would be the browser default of 16 pixels. <v Michael>Okay.</v> <v Lee>So it's counterintuitive, 'cause you would think,</v> like, "Oh, my parent container is 800 pixels tall. If I set the font to be font size 100%, it should be 800 pixels tall." But it's not. It's based off this totally other thing, the font size, and that's exactly how ems work, and so most people just use ems. <v Michael>Okay.</v> And that, in fact, is our next topic, so that'll work great. Before we move on though, let's get rid of this test div. Just double check here. We go in... Is this what we've got for now? Do we want to keep the bio wrapper empty? I think we do keep it empty. <v Lee>Mm-hmm.</v> <v Michael>So, we'll keep this empty for now.</v> It'll give us an option though, to fill it in later on. <v Lee>Yeah.</v>