Wrapper Classes: A Layout Foundation

Key Takeaways

Hello, my friend and friends. I have a blue background that is stuck here, and that's because all of my content is in my main. So, I have one main, everything's in there, and that main currently has a width on it. And this is already causing a problem, but we're going to fix I want my blue background to escape outside, right? So, let's make that happen first, and then we'll fix the other problems I have that are going on in here. Uh so, for that, what I'm going to do is I'm going to delete this main selector, and I'm going to change it into a class selector of wrapper. And now everything isn't being held anymore cuz I changed that. And I'm not going to put that wrapper on the main. I'm going to come here instead. I'm going to do a div class is equal to wrapper like this. And what I would encourage you to do if ever you have these types of uh things where you can't really see what you're creating, which is very common to happen and in early days when you it can be hard to visualize what's actually happening. So, let's come in here and add a border of 5 pixels. I'm going to do dotted red so we can see exactly where it is. And I've opened it here. I haven't closed it anywhere, but it's still going to put it in the page for me, and it's just going to the browser's like, "Oh, it never ends, so we'll just end it at the bottom." Uh and we have we're back to where we were before where we're stuck with the blue background there, right? So, let's fix that where I'm going to have my wrapper start here. Then I have my H1 that's right there. Then we have this section of content. That's all fine. And then we get to this one here where I have a class with has the background color on it. So, this section is where the background color's coming from. So, what I actually want to do is I want to end this wrapper here, right? I don't want that blue background to be stuck inside of there. So, I'm going to come here. I'm going to say close div. We can even put a comment here to help remind ourselves. This is closes wrapper. Cuz when you have these random closing divs, sometimes you have like four in a row, it can be hard to remember what they're actually doing. So, we can close my wrapper, and then we can see that now this background color is expanded. Now, we have a problem. My text is also expanded. We will fix that. But let's come after that blue background first. We can come over to where the rest of my regular content is here. And I'm going to come and say that I have another div class is equal to wrapper. And I'll talk about why I'm using the name wrapper as well. Um but then we can go down all the way down to the bottom here. Scroll down. Scroll down. Scroll down. Even though the browser's going to close it for me, I would say it's always a good idea to actually close div uh to close the wrappers you have. And once again, we can put a comment here cuz this is so far away from the opening one. We can say uh closes wrapper. Just like that. And then to also make it more obvious, I'm going to put the cursor right here on that thing. I'm going to scroll all the way back up. Let's go as fast as we can without being disorientating uh and see losing our spot. So, here's where the wrapper is starting. So, I'm going to push shift on my keyboard, and I'm going to go to the section. I'm going to push tab just to do my indentation so it makes it more visually obvious everything that's inside of the wrapper when I'm looking at the HTML as well. And now we have the wrapper at the top, and we have this wrapper there. And this is why having a class is useful because we can reuse it. Whereas if I had that original thing where I was putting it on my main, or sometimes you even have a width on your body, then you're just locked into this big thing holding all of your content, and you can't have these elements that can escape outside of it. There's ways of doing it that are kind of hacky, but if we don't need to bother, you know, if we can avoid hacks, we should avoid hacks. Uh but of course, now we need to fix this area right here as well. And to do that, I'm going to come here where we have this background color. Let's add a bit of extra space there so we can focus just on that. And now this has the background color on it, so I want to allow that to stay full width. I just don't want the content inside of it to go full width. Well, that just means I can come right here, and I can do my div class is equal to wrapper right there. Of course, the closing triangle bracket goes there. Then I have my H2. I have my paragraph. And then I would come down here, and I can close div. And once again, let's put a comment there. Close wrapper. Just like that. And then we can come select all of this, hit tab to fix our indentation all along there. And now we can see I have a wrapper here that's closing. I have this other wrapper inside of the blue background. And then I have this other one that's going on over here. Let's go and turn off this red thing cuz there is a problem still, but let's make it look like what it would look like now that we understand how it's working. Uh and so, I'm pretty happy with that, but the problem is if I go to smaller sizes, this is not working. And even when I scroll over, like the background doesn't extend out, but my text does, and I can't read it unless I scroll it it's it's terrible. Uh and we have a bit of a problem going on right now. So, to be able to fix this problem, and what's causing this is the width that's here. And before I look at what the fix is for that, I just want to let you know that I have a completely free course that if you're very new to HTML and CSS, and so far you've been enjoying this lesson, uh the free course is here on YouTube as well as on my course platform. I'll talk more about that in a second, but we look at building up this page here. We're covering things like flexbox and grid, which are layout tools. We're talking about making things responsive so the font sizes can adjust and the page can adjust as the screen is getting smaller or larger. We build out multiple pages. We talk about images, changing colors, all the things you need to know, links, everything like that that you need to know when you're first getting started with HTML and CSS. So, the name of the course is HTML and CSS for absolute beginners. And if here it is on my course platform that has the advantage of first of all, it's ad-free versus YouTube, but where you can also keep track more of the lessons you've been going through. And at the same time, there's uh text lesson that goes along with the lessons as well with the video content that is still here in the platform. And then there's the code snippets that you can look at. And there's these interactive examples that are here, too. So, here if I do a paragraph, I could say this has a color of red, and I can see it change live here in the browser. And it goes from the absolute basics assuming you've never touched HTML and CSS before to building out that website we were just looking at. So, if you're interested in that, both the playlist here on YouTube and the link to this version of the course are both down in the description just below. And with that, let's look at fixing this the the issue we had here with our overflows. So, to be able to do that, what we want to do is just here where I have a width, instead of saying a width where I let's delete all of this, actually. We're going to modernize this a little bit. Instead of a width, uh we're we could do a max-width, but I'm actually going to say not even to do a max-width, but to do a max-inline-size instead. And I'm going to do 720 pixels. And then instead of the margin-left and the margin-right, what I would recommend is a margin-inline. And I'm going to do auto here. And it looks the same as before. I'm going to explain what these are in just a second. But you can see it's working exactly how we had it, but now with the smaller sizes, it's allowing the content to squish down and get narrower, and it doesn't cause that overflow in the horizontal scrolling that we had before. So, to explain this a little bit that I was mentioning, what this is is the inline-size is the logical property for inline axis. Same here, our in margin-inline is the margin on the inline axis. And in most languages, our inline axis is the left-to-right. So, we're talking about the left and the right side. And the reason it's a logical property is ever you had something that was a vertical writing mode that you get in some Asian languages, for example, then the inline axis would actually switch because the writing is vertical, so the inline axis is the other way. Uh but it has the advantage, especially with these short hands like this, um where margin-inline won't touch the top and the bottom. So, it's a short hand for only the left and the right. And if ever you did need to target only the top and the bottom, we have our margin-block like this. And if you'd like to know more about logical properties, I'll put a link in the description down below on a video that just talks about logical properties and how they work and what they're good for uh and why we want to be using them basically for everything we do. And the other thing I'm going to add here is a padding-inline as well. Uh I usually do 1 rem just out of habit, but if you're not using rems here and you'd rather use pixels, if you're using pixels for font sizes, don't do that. It's covered in the course why you don't want to do that. Uh but let's come here and say like 21 pixels for my padding on the inline. And what that just does is when we get to these smaller sizes, we're stopping the text from touching the side. Like if I remove this, you'll see that the text touching the edge. If you're ever on your phone and you've seen websites that do that, I guarantee you you hated it. So, uh you can see just by having that padding-inline, it prevents the content from touching the edges. And this one down here, uh the gap there is just caused cuz of the scroll bar area. That's why we have that. Um but if we make this bigger here, you can see that everything's working great, and that padding is just helping us with a little bit of extra spacing on the sides right there. One last thing I want to mention is you might also see this called a container rather than a wrapper. And it's very common naming convention to call these containers. It's more widely used than wrapper. I used to call them containers. So, if you watch some of my older content, you will also see me do that. So, I wanted to bring it up just cuz it's something you will see in the wild. The reason I'm using wrapper is first of all, it is another name that is commonly used for this type of thing. But in CSS, now we have something called container queries, and I find it could be confusing if I have a class of container that has nothing to do with a container that's being created for a container query. So, I've stopped calling them containers. I'm now calling them wrappers instead. So, dot wrapper is what I would suggest, but if you want to go with uh dot container instead, again, that would be something that is very commonly used. As a reminder, if you did enjoy this lesson and you want to go through the course, the link to both the playlist version here on YouTube or the full course version of it, they're both linked down in the description below. And with that, I would like to thank my enablers of awesome, Andrew, Simon, and Tim, as well as all my other patrons and channel members for their monthly support. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.