Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
CSS: Page Layouts introduces basic layout concepts, gives advice on how to create properly structured HTML based on prototypes and mockups, and goes into critical page layout skills such as floats and positioning. Author James Williamson shows how to combine these techniques to create fixed, fluid, and responsive layouts. Designers are also shown how to enhance their pages through the creative use of CSS techniques like multi-column text, opacity, and the background property. Exercise files are included with this course.
Even though percentage values are always defined as being relative to another value, they're still defined separately in the CSS specification, meaning they are not grouped with other relative units of measurement; they are just sort of defined by themselves. Now one of the reasons for this is that percentages have their own very unique rules when it comes to how their values are calculated. To use percentage values in your layout with confidence, you're going to need to understand exactly how their values are computed. So if you are going to do this along with me, go ahead and open up percentages.htm, which can be found in 01_05 directory.
This is exactly the same file that we used in our last movie, so if did the calculating em values with this--let me just go ahead and just preview this--you can see it's pretty the same file. Same structure, same everything. Now I am going to jump back into my code here, and let's talk about this for a moment. If I scroll down into my body, you can see that currently right now the width of this page is set to 960 pixels. Well, let's just go ahead and set that to 80%, so I am going to take it to 80%, go ahead and save that, and if I go back into my browser and refresh that, you can see that the width of the page changes a little bit there.
You know the other thing that it does for us is now the width is relative to the viewport. You can see that resizing the page is causing those elements to flex because the actual size of the page is flexing, and if there's not enough room for these elements, you can see it's dropping the elements down, based upon how wide the page is. Now, let's talk about percentages and how they are calculated. If you use percentages on box model properties, like width, padding, and margins, then those values, they are calculated relative to the width of the parent element.
Think about our body for just a second. The body is relative to the viewport, so that 80%, we're getting 80% of the available viewport. That means that any time you set percentage on one of those properties, it's going to be that percent of the element's parent. Now that's pretty easy when it comes to width, because you are saying, hey, I want to be, you know half the size of the element I am sitting inside of. But it does get a little bit harder to remember that when you're doing padding and margin, so let's go ahead and kind of experiment with that a little bit. Okay, I am going to take a look at these two selectors right here: em and percentages.
Remember, those are those two sections that we were looking at earlier. And I am going to change the em's width to, say, 60%. And then I'm going to take the percentages and I am going to change its width to, say, 30%. Now, 60%, 30% of course is 90%, right? But that's not 90% of the viewport. If I scroll back down, for example, I can see that this section with the class attribute of em and this section with the class attribute of percentages, it's actually sitting inside of this particular article tag.
So essentially, that 60% and 30% are relative to the width of this article. Not even the body. Now the article as a block-level element is getting its width from body, because we haven't explicitly gave article a width yet, so it's basically sort of expanding to fill the whole body tag. So essentially, that 60% and the 30%, they're really asking for a 60% of the body or 30% of the body, because we don't have an explicit width set for article. So if I save this, go back in my browser and refresh that, you can see that those values change rather dramatically. And now, if I resize the page, you can see that they are basically changing their values, but they are still staying relative to the fact that this is 60% of the available space within the body and this is 30%.
The body is 80% of course. So it's actually 60% of that 80%. Now if you go too far down that rabbit hole you can drive yourself crazy; just remember, it's 60% of its parent element. So now, I mentioned earlier that it gets little trickier when you start talking about margins and padding and things like that. Let's take a closer look at that. Go into both of these selectors here for the em and the percentages, and I am going to go ahead and give them a padding of 1%. Same thing for percentages; I am going to give it a padding of 1%.
Now one of the most difficult things to do when you're working with a layout like this, and we are going to talk more about flexible layouts defined with percentages is little bit later on-- we have a whole chapter on those as a matter of fact-- but one of the most difficult things about calculating these values is exactly how much do I need to get the visual amount of padding that I want for this? And one of the things that you might want to consider doing is thinking about starting with sort of preferred size if you will. Even though we've stated this to be 80%, you know if think that the preferred size of it is at 950 pixels, for example, I can say okay, at 960 pixels, I want 10 pixels' worth of padding, all right.
So then you look at 10 pixels on one side of an element and 10 pixels on other side and you can add that up to 20. You can say okay, 960, if I take a look at 960, what percentage of that is 20? That calculates out to about you know 1%. So if I save this and test this, you can see now we are getting you know, at 960 pixels we're getting roughly 10 pixels' worth of padding, which is kind of cool. And if I resize that, notice that that value gets smaller as I get smaller and as the page gets bigger, that value also gets a little bit larger based upon the available size for it.
Now if your calculations that you do happen to turn up decimal points every now and then, don't be worried about using those. Browsers can handle decimal points really, really well. So if I come and say 1.4% instead of 1% and test that, you can see, it increases just fine. Nothing breaks. The computer isn't smoking. There is no fire coming out of it. It can certainly handle that type of math. That's not an issue. I am going to go in and talk a little bit about what happens when you start dealing with some of these interior elements.
So if I scroll down, I am going to go down to this h2 selector here and I am going to change it's margin-bottom value. I am going to set that margin-bottom value to 5%. Now the reason I'm doing this is because I want to illustrate the fact that anytime you use percentages on a box model property, in terms of calculating the value of that, it calculates relative to its parent. So this h2, remember is inside of this section, which is em, and it's inside this section, which is percentages.
Remember, em is set to 60%, so it's available width is a bit larger than percentages, which is set to 30%, so it's available width is smaller. So if this h2 is giving me, say, 5%, it's going to give me 5% based on that 60% size, whereas the percentages is going to give me that 5% based on its 30% size. So if I save this and preview it, indeed you can see that I'm getting more bottom margin here on this h2 than I am on this h2.
It has everything to do with the relative size of those elements. And if I shrink that, notice that the margin is shrinking. If I expand it, notice that the margin begins to expand as well. Another thing that I want to point out to you guys here. We don't really need to illustrate this. I just want to talk about it. Percentages should not be used for border width. This is actually per the W3C CSS specification. They are not allowed. If you go ahead and use them anyway, well, what the browser will do is it's just going to display whatever the default border width is, regardless of which value you used.
So you could say 400% on a browser border width value and you still just get the default border. We are going to have a chance to put what we've learned here about percentage values to the test a little bit later on when we create percentage-based flexible layouts. Now that you know how browsers calculate percentage values, you'll be better prepared to plan out element sizing when working with those layouts.
There are currently no FAQs about CSS: Page Layouts.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.