5.4 Using calc()

Hello, and welcome back to the CSS of the future. If you've ever used any CSS pre processors, such as LESS or Sass, then you're probably familiar with the idea of using math in your CSS to calculate values. Well, what a lot of people don't know is that we can actually use math natively in CSS already in a number of different browsers. In fact we can use what's called the calc() method in CSS in all modern, major browsers except for Opera Mini. If we go to caniuse.com and do a search for calc(), then you can see that all major browsers across the board, at least the latest version of all major browsers. Except for Opera Mini, support this use of the calc() method. So you can already experiment with it quite a bit. And one of the great advantages we have when we use calc() natively in CSS as opposed to using it in a pre processor is that we can combine different units of measurement. So, as we can see in this example up here. We can combine percentages and m's. We can combine m's and pixels. We can combine all three if we want too. So we can combine multiple different types of units of measurement. And as you can imagine, that gives us a lot of flexibility when we're trying to calculate these sizes of our elements or the positioning of our elements. So let's jump into our html file and see how this works. Inside your project files folder you'll find a file called calc start.html. As you can see, we have just a couple of paragraphs with a couple of headers in it. But when we look in our HTML we'll see it's actually broken up into a few divs. So let's jump into brackets, or what ever text editor you are using. And we'll open up calc start dot HTML and I'm going to go ahead and save it as calc.html so that I don't accidentally save over our start file. And, as you can see, we already have some basic CSS inline, and I've also got a few place holders here where we're going to add some more rules. We're also using the clearfix hack here in order to clear all of our floats in our container div. And then down here inside the body we can see our HTML. So we have one large div with a class of container and another class of clearfix. And then inside that container we have a header and then we have three columns. Each of these columns has a heading and a few paragraphs in them. So I thought that one really effective way of showing you how this calc() method can work is by laying out our content in columns. So let's start by colouring some of our content. I'm going to put our entire header or I'm going to give our entire header background color. So here's our container. I said header, I meant the container. We've got a width of 100%. I'm also going to give a background color so that we can see everything. Maybe pound DDD, a light gray color. We'll go ahead and save that and refresh. Actually we need to navigate to calc.html and there we go. Now we see that background color. Then I want to set the header apart. So for our header. I don't have a class for the header yet. So just beneath our container, we'll create a rule for the header class. I'm going to give it a back-ground color of #777, and a text color of white. Save that and refresh. There we go. That looks pretty good. Let's just add a little bit of padding inside that. Let's do a padding of ten pixels. Save that and refresh. That looks pretty good. And let's say that we want this to be a little bit taller. Let's actually specify the height here. So instead of setting the padding let's change that. Let's set our height here. To maybe 60 pixels. Save that and refresh. We'll see how that looks, and that looks pretty good, so now let's just add some left padding to move it over. So, we'll set padding left to about 1em. Save that and refresh, and then I'm going to set the line height of our header here, so that we can vertically align the center. So we're going to go into our h1 here and set the line-height to the same value as our header, which is 60px. And if we save that and refresh, our text will be vertically centered inside that header. And so far that looks pretty good. So let's take a look at our calc() method. Let's say that we want our container to be the full width of the browser minus about one em. So, we'll jump back into our CSS, and here we have our container. We've set our width to 100%, but I'm going to change that. Instead we're going to use the calc() method. So we use the word calc and then a set of opening and closing parentheses and inside the parentheses we can perform any simple addition, subtraction, multiplication and division. So were going to do some subtraction here. We're going to set our width to 100% minus 1em. Now one thing that's very important to point out here is, when you use your plus, minus, times, or divided by sign, you need to make sure that it has a space on the left and a space on the right. If you crowd it up like this it's not going to work so we need to make sure we keep a space in there again otherwise it's not going to work. So let's save that, refresh our page, and now we see that our width is a little bit less than the complete width of our browser. Now, if we want to center that, we can just add a margin value of zero auto. Save that, and refresh, and now we've got it centered. So we've got 0.5em's of margin on the left and right. And again, yes, you could do this with margin, but I just want to show you how this calc() thing works. So then we'll add for our container a margin top value of 0.5 m's and that should give us all the padding we need on all three sides. Then inside our container, I want to add some padding here maybe of 1em save that, and refresh. Now we have a little bit of padding inside, but as you can see our width has now gone too far off to the right. So we could subtract more from our calculation or we could just set our box sizing here. For our container to a value of border-box. And that should take care of that. We'll save that and refresh and there we go. We're back to the width that we're looking for. So let's take our columns here and you'll notice I have a rule here for any of these classes that start with col-, so that's going to be all three of our columns. That's what this ^= means. That means it's going to start with this value. So any of those columns that start, or any of those class names that start with col-, we're going to apply the following rules. Let's set our background color to white. And we'll add a little padding to these, as well. A padding of 1em. And we'll use the same box sizing property, and set it to border box. And let's save that, and refresh. So we can't really. See anything between those divs because all three of those column divs are right up against each other so it looks like one giant block of content with a white background. But it is three separate columns. And we can prove that by just adding a light gray border here. So border one pixel solid #eee. A light grey color. Now we can see that border in between them. So now let's adjust the widths of these. And we're going to do this again using using the calc() method. So for our one third column we want it to take up one third of the width. So we're going to set the width to a value of, and again we're going to use the calc() method, and this is going to be one third the width of the stage. Now we could just give it a width of 33%. And that's roughly one third. But the problem is, if we do this, let's copy that, then we'll paste it here and here. If we set all of our widths to 33% and then go back to our page and refresh, first of all, we need to set these to float to the left, so let's do that inside this rule here. Were also going to set our float to left, save that and refresh. You'll notice that our three columns, even though we've given them a weight of 33%, dont come all the way to the right. Cause obviously, 33% is not a exact number. We can get it closer by typing 33.33 for all of these. And that will certainly get it a lot closer to what we're looking for. Save and refresh. But still, if we were to zoom in we could see that it wasn't precise. I mean, it's probably close enough as is, but we can get it perfectly precise. If we use the calc() method. So what we're going to do here is we're going to type calc. Then inside the parenthesis I'm going to type 100% and this time we're going to divide. We're simply going to divide by 3. So you can use units of measure or you can just divide by a number. So we'll do the same thing for all three of these. Copy, then we'll paste that here and here, save and refresh. And as you can see, we get a very precise width that perfectly matches the header above it. However, what if we wanted some space in between each of these columns? Let's say we wanted 1em of space in between each of these columns to act as a gutter. What we could try to calculate by hand, and then write out what we think those values are going to be, and then enter in the right percentages. Or again, we could use some math. So let's say we want to take 1em off the right side of this column. And 1em off of the column on the right. So we're going to adjust these widths again. Our first column is going to have a width of 100% divided by three and then we'll subtract 1em. We'll do the same thing down here for the third column, minus 1em. Now this isn't really telling us which side we're taking it away from. We're really just reducing the width. That's all we're doing. So if we were to save it now, and refresh our page. We now have two extra m's of spacing over here on the right. So now we can set a margin right on our first and second columns, or we can set a margin right on all of our columns. Margin right of 1 em. And if we do that, we're still going to have our third column wrapped down to the line below, because if it is has some margin on the right, there's not going to be room for that extra margin. So we need to take away the margin on the right side of this third div. So for the last child, we'll simply go into this rule here, and create another rule for margin right, and set it to 0. Save that, and refresh, and now we have all three columns on the same row. Now let's say we want all of our heights to line up a little bit better. Let's say we want the height of our container first of all to be most of the height of our browser window, so we can come up here to the top, and before we can set the height of the container, we have to set the height of its parent element. Otherwise, it won't really work. So, if we go to our HTML and body tags, and set the height there. Let's set that to a height of, let's just do 90% here. I don't want it to be the entire height of the browser, but most of the height. In fact, I might even bring that up to 95%. Let's save that and refresh. And obviously we can't see a difference because we haven't changed the height of the container yet, but now that that has a height of 95%, we can give our container a height of 100%. Let's see how that looks. Save it and refresh. And there we go. So then let's take a look at the height of our three columns. Let's say we want those to take up the entire height of the container. So we can go into our columns here. And give them a height of 100%. And this isn't going to be quite what we're looking for. If we refresh, we see that they're all coming past the bottom of our container and the reason for that is, if we give these a height of 100%, it's not taking into account the height of the header above it. And if you remember right, that header. Has a height set of 60 pixels. So instead of setting our column to 100%, we're going to use the calc() method again, and set it to 100% minus 60 pixels. Save that, and refresh, and we're back to where we want. So, as you can see, you can use any combination of plus, minus. Multiplication and division in order to get the calculations that you want. And this is obviously just one example of the many things that you can do with that. This doesn't just apply to the width and height of objects. You can use this to place objects on the stage. If you wanted to place an object in the bottom right hand corner. Then you can use height minus, or 100% minus a certain value. So 100% minus 10 pixels, and then for the right value, 100% minus 10 pixels. There are a limitless number of options for using this calc() method in order to create calculations in your CSS code. And as you can imagine, this can make your work so much easier in certain situations. So thank you for watching, and I'll see you in the next lesson.