2.2 Sizing CSS
There are essentially four components to layout in CSS: sizing, alignment, spacing, and responsiveness.
In this lesson you’ll learn about the first of these components, sizing, by using the
2.2 Sizing CSS
Hey welcome back to start here, learn CSS. In this lesson you're going to learn all about sizing in CSS. And we are gonna be applying some sizing to our HTML here, and getting our layer underway, but before we do I just wanna give you a quick run through of the six different types of sizing property that we're looking at in this lesson. There are three that affect height, and three that affect width. Right, so over here, we've just got a blank HTML page. Inside it we have nothing but just an empty div. This div already has a little CSS applied to it, it just has a red background. However, you can't see this div right now. So, let's just inspect our HTML. And if we go into our body section here is that div. So, we can see in our code that it's there and yet we cannot see on the page. But if we look at this little layout representation here, it's telling us in the second number on the right that the div has no height. And has a height of zero, so that's why it's currently invisible. So to fix that, we're going to use the highest property. So up in our div style, we're gonna add the property, height and let's just give it a value of 10rem. And there we go right now we can see our div. So,right away you can see the effect of the halt property. Now, let's have a look at the width the property too. Right now, I don't want this div to just be filling up the entire browser window. I wanna bring it down, so it's not quite as wide. So, this time we're gonna add the property width and now, let's give this a value of 15rem. All right, so now, we've bought in our width of our div. Now as well as setting a specific height and width like we have here with our 10 rem and 15rem, you can also use percentages. And these can be really great for creating responsive layout, so layouts that can adjust themselves to see any viewport size. So, let's see what happens if we change the width from 15rem to 50%. All right, so now our div is exactly 50% the width of the view port. But this is not a fixed size anymore. Now, if I increase the size of the view port, the div also increases. And you'll see why that's really helpful and really important as we go through and lay out our page. So, heighten with the most fundamental sizing properties that you'll be working with. But sometimes they're not enough to achieve what you need to do you by themselves. You can also combine into the mix the min width and min height properties and max height and max width properties. Now let me show you an example, so I'm just temporarily going to change the width of this div to a fixed amount, let's say 50rem. Now if the browser window is wider we can see the whole div, but as the browser window gets shorter. We can't see the whole div anymore, and we have the scroll bar that appears along the bottom, so what do I do if I want this div to be adjustable like we just saw with 50% with div, so that I don't have to scroll bar along the bottom, but I still don't want it to be any wider than this when the viewport is larger. And what we can do is change our width to 100%. So now, that's gotten rid of scroll bar. And then, we can add the max width property and set that to 50rem, rather than having the width set to 50rem, we're now setting the max width to 50rem. So, save those changes and no scroll bar has appeared at the bottom but if we increase the size of a window, now the div still doesn't get any larger than that 50rem amount. So using both of these together to allow us to control the width of our div and still keep it flexible at the same time. So that's an example of how you can leverage a maximum setting on your sizing. And the max height property, which just looks like this, works in the same way, so I won't do a demo of that just to save a little time. Then the other type of property to consider is a min property. You can sit min height. And you can also set a mean width. Now let's look at an example of main height in action, all right? Now our deep is set with a fixed height of 10rem. Now watch what happens if we add a little constant inside the div. Now because it has a fixed height, all of the content that we've added has flowed outside of the div. So, we can do here, instead of using a fixed height of 10rem, we can set a mean height of 10rem. So, we'll change that, so that it reads min-height and now, the div has the ability to expand out to whatever height it needs to. If we take the content out again the div will still get no less than 10rem in height. So that we don't have that problem of an empty div being invisible like it was when we started out. But because it's only a minimum height, that means that it still has the ability to expand in size if it needs to. So just like with the max settings with the min setting you can have min height and you can also have min width which once again works in a similar way. So just to recap you've got height and width. You've got min height and min width and you've got max height and max width. All righ, now let's take those properties and use them to start controlling the layout of our HTML page. All right, so here's the CSS we're beginning with. This is almost exactly the same CSS that you ended up with at the end of the previous course on typography. The only difference is the wrapper class has been removed from the top of this file. And that's because we're gonna recreate that wrapper class ourselves, so that you understand all of the code that it contains. Before we get started on our sizing code, this is one little piece of housekeeping that we need to do. You’ll notice here that we have a heading even though we have a logo that says the same thing. Now this heading is here purely to create a proper HTML five outline. We should remember we touched briefly on HTML five outlines in the first course in this series on HTML basics. So, you can see the heading has been picked up here in our HTML outline, but because we have this logo here. We don't want to see this heading. So, we're just going to drop in a little snippet of CSS that we're going to use to hide that. Now, you don't need to understand the CSS right now, but just for the sake of having things done probably just paste this snippet into your code. And then, we already have this class hidden applied to the heading there. So, this will just take care of hiding that heading for you. All right, now moving on. The first thing we're gonna do is create a new wrapper class just like we've had in all the previous lessons so far. We're going to use this wrapper to set the maximum width of our continent. Now, right now I'm recording at 1280 by 720 because it makes it easy for you to see what I'm working on. But because our wrapper class is going to be setting the maximum width, I'm going to need to show you a full sized monitor space. So you're about to see things shrink down a little bit in this video. All right, so now we're at 1920 by 1080, and I'm just going to blow up this browser to full size. And you can see that the content that we're working with is going far too wide. So the first thing that we're going to do is going to set the maximum width that our website can ever go. And we're going to set that to 80rem. So in your CSS we'll add the wrapper class and we're gonna use the same trick that we just did on our red div before. So we gonna add a width of 100% and we're going to add a max width of 80rem. Now when the browser is full width,we don't see the content stretching all the way across the page. So it never gets any wider than 80rem. But because we've used a flexible percentage in there as well, we can shrink the window down as narrow as we'd like, and the site is able to adapt accordingly. All right, so now let's add in our column width. If we look in our HTML, we have the class col_01 on a section here and we have col_02 on our side. So let's add in those selectors, we'll add call_01 and we're gonna set the width of that to 62.5%. Then we'll add col_02 and we'll set this width to 37.5%. So I'll just blow this up again so you can see it. Right, so now, our main content column is a really good width so that you're not straining your eyes by having to read lines that are too long. Now our aside down here is going to become the right hand column when we move on to working with alignment. So it is gonna up here on the right side. So its width is purely designed to take up the rest of the space inside our wrapper. And then, as we crunch down the browser sides you'll see that each of our columns is flexible. And that is because we use percentage based widths. So these columns can always respond to the width of the Viewpoint. All right, so with those basic widths in, I'm just gonna switch back to a regular video size. So now we've got a sizing in place for our wrapper and for what's to become our two columns. But there's still one more thing that has sizing that's not quite right and that is the image that we have here which is placed at the top of their side. And because this image is inside. What is to become our side bar or a second column. We only want its width to be equal to the width of this column. And the way we're going to make sure that happens is by setting a max width on all images that are used in this site. So in our CSS at the top here, you'll notice that we've got all of our selectors at the top are elements, and then all our custom selectors are below that. That just helps to keep your CSS organized. So up with the rest of the elements we're gonna add an image selector. And then, we're going to set a max width of 100%. So now, the browser has detected that the width of this image should be no greater than 100% of the container it;s sitting inside. And if we inspect our element, you can see the size of our column and you can see that the image is fitting perfectly inside it. Now the other thing that you want to do whenever you're setting a max width on an image is to also said it's hot but here we're going to use a property or by setting an automatic hot what that does is it retains the correct aspect ratio for any image that gets resized by the browser. And this snippet right here is technically a part of your responsive coding which we'll be covering in more depth in a later lesson. And you want to make sure that you include that snippet in every single one of your websites and then you'll make sure that whole of your images are responsive. All right, so now that is everything that we need to do right now for sizing with our layout right here and in the next lesson we're gonna move on to alignment. So, we're gonna take our side and shift it up to the right hand of the screen here and we're gonna align our logo and our photo content. So, I'll see you in the next lesson.