HTML & CSS for Absolute Beginners: Preventing layouts from getting too wide

Key Takeaways

at one point or another when you're working on your websites you're going to run into an issue where everything is looking not too bad uh but if you have a large enough screen size and you decide to make it a little bit bigger uh you might not be too happy with how things look when you get to these larger sizes and everything just stretches the whole way across the page this looks kind of terrible right now and it makes it really hard to read long paragraphs where you actually have to like turn your head a little bit as it's going and the bigger you make it the worse it gets so how can we limit the total size it's not too complicated but what we want to do is we're going to create a new class for this and there's two names that are sort of the industry standard at this point uh I'm going to come down to where I have my section here and sort of it's a little bit of a generic thing so I'm going to include it right here I'm going do wrapper and the wrapper is what I've been calling it most recently I used to actually call this a container and I'm putting the dot in front because this will be a class and container is the more common name for this when you're out in the wild so I do want to talk about both of them the thing is in modern CSS there's a new feature that was added called a container query we're not going to be covering that right now uh but because we have container queries that create containers having a container class to me that doesn't have anything to do with container queries just seems like it's opening the door up for potential confusion down the line so instead of calling this container I'm calling it wrapper but I just want to make it really clear that you might have already seen this previously with container or if you run across a container in the future there the names are basically interchangeable but I wanted to explain why I use the name wrapper and then on my wrapper here I can come in with an inline size and again you might see this is a width instead of inline size this is The Logical property though and what I would encourage you to use and for now I'm going to say an inline size of 1,000 pixels and what that's going to do is we're creating something that's going to prevent our content from being wider than a th000 and I might reduce that a little bit for the demo because of the screen recording I'm doing but we'll try this out and I'm going to go over to my index and I'm come all the way up to the top and just so you know this is going to work cuz the layout that I'm creating that looks like this where I want all of my content from we haven't done the logo and navigation yet but all the way down we're all holding it within a set size sometimes you might have backgrounds or other things that expand out so you have to organize things a little bit differently in those cases but for now the simplest thing to do right after my body I'm going to come in with a div class is equal to wrapper and I don't want to close my wrapper right away so then I'm going to come all the way down to the very bottom right before I close my body and I'm going to close that div and then I'm just going to move that over I'm actually going to go all the way back up hold shift to select everything and then push tab just so my indentation is good as well and then I'm going to refresh my page and now if I go bigger look at that isn't that better we're not getting too wide anymore we're now preventing the content from escaping that and it holds everything it makes my paragraphs so much more easy to read but because we have that wrapper on there that's a th000 pixels wide if I come and I go smaller than that now this is happening where we end up with some sides scrolling and that is not a good thing we do not want that to happen uh especially with the amount of people using mobile phones and all of that aging myself there calling it a mobile phone I think but everybody coming in with their other devices that have smaller screen sizes and just to highlight a little bit of what this wrapper is doing let's come in and add a border do not put borders on these normally uh but I'm going to do a five pixels uh let's do it as a dashed red just to have something a little bit different so we can actually see the way that that's holding all of our content and it's preventing the other content from getting any bigger which again is exactly what we want but we don't want that to happen when we get to these smaller sizes over here because then it's still that big so to be able to solve this instead of doing an inline size I'm going to switch this very simply over to a Max inline size and I'm going to refresh and look it fixed the problem you can see right away that it's been fixed if I go larger it will not get bigger than a th000 because we have a Max inline size and if you're using the non-logical property that would just be a Max width and then as I come down this way it's allowed to still get smaller the way it was already doing before CU let's remove this refresh fresh it was already doing this before you can see here everything was working before and this is where I mentioned earlier and this is why I always talk about how the default behaviors of everything are really good and I don't want to fight against the default Behavior I want to embrace the default which was working fantastically well I just want to go okay this is working great I love the default Behavior up until a certain point and then I'm going to put a limitation on how big things can get so I'm not fighting against what the browser is doing I'm just saying okay that's good except for let's stop this one thing so max inline size means that it's all working but we've just hit a maximum total size here now when we have a maximum total size that helps a lot we can actually read our text it makes the website look more and very typical to have these types of things there but usually most websites when they do this also Center that content on within the viewport once we've hit that maximum so to be able to do that what we'll do is we'll shrink this back down right here and right here where we have this and I'm going to add in a margin and I want it on the left and the right side so that's my inline that I'm going to be using so it's my inline axis the thing is how big do we want to make it and I've seen a lot of people who will have like they'll be working with the browser at a very specific size on their screen so then they magic number it don't do this but just to highlight what some people will do is they look at it and they go what if it's 50 pixels and then they look at it they go it's not quite centered so then you say 70 and you try 70 and you're getting closer maybe 75 oh that looks pretty good that looks like it's centered left and right and they're they're really happy with it but then they go larger and oh no that didn't work and then you go smaller and then uh the smaller one actually it's working because it's 75 on both sides so it's not the end of the world but at larger sizes all of a sudden we go off center again which wasn't what they were trying to do uh and there's actually a really easy way to do this with CSS and it just is to put in an auto keyword here so margin in line or a margin left and a margin right uh of Auto and if I refresh that now as it get smaller it's still going to work the same way it was working before but when we go to these larger sizes once we hit that maximum size the auto keyword is just saying distribute the leftover space equally amongst the left and the right side and It Centers our content perfectly on the page and of course with this we want to get rid of our border that's on here CU that doesn't look very good uh and yeah that's it that's all there is to centering content nice on the page that will work at large screen sizes and not cause any responsive issues when you're getting to smaller sizes now the one question I do get whenever I show something like this is why am I doing that on my wrapper and putting my wrapper as the very first thing on the body here or inside the body I should say and then going all the way down to the bottom and then having it right close right here right before the end of the site if I'm doing that why don't I remove it from here and then go all the way up here and remove that from here and then come into the style here and instead of doing this on the wrapper why don't I just put this on the body right just limit the size of the body and in this case I actually get the exact same result I had before I've there's literally no difference uh and so if you ask yourself that why you wouldn't want to do it that way you're you're actually right or there was a small difference we've lost some of the spacing on the edge we're not going to worry about that now but basically we've we've got the same the same type of result going on the reason I don't want to do that is because this is much less versatile and in general layout things I want to keep I don't want to touch the body for layout reasons and that's because what if I need one of these to be different and I need something to break out from my container I need it to be wider if I have this on the body it becomes very hard to be able to do that because my body is holding everything my body has to be the first thing that's open at the start and it has to be the last thing that's closing at the end for the things that are visibly on my screen whereas if I bring this back as a wrapper and I save that and then I bring back my wrapper here and I bring back my closing div at the end so as an example of that let's just say I wanted this to actually be a lot bigger than what it actually is to be able to do that what I would do is I wouldn't close my wrapper all the way at the bottom here so I'm going to remove that closing from there we might have to change where the beginning one is I'm going to turn off word wrap here because it's going to make life a little bit easier to look at and we'll head back up to where it's starting and this one's okay to have here but because then we go into the main and I can't close it inside of the main what I'm actually going to do is close this one here so we get a wrapper around my header and then and this is something that's really common when you have wrappers that's why a class is good for this because you're going to have them all over the place a lot of the time and then inside my main I can come in with a new one div class equals wrapper and I can close that so I'm just going to cut this to remove it I'm going to keep this section or this is the one that has the tbg in it so I'm actually going to close this one here so that means we can select this tab it over so wrapper has my H1 and my image then we get a section over here and for now I'm actually going to let the entire section go wide just so we can see how this is working and then I'm going to come down to this area here and I'm going to put in a new div class is equal to wrapper we're going to tab that over so our spacing oops we're going to tab that one on over so we go on here I can grab the closing one come all the way down to after this section and now if I come in I refresh this we suddenly get this going on where we have this is all within a wrapper this isn't so it's going full width and then we get back into having this area down here that's in the wrapper and then very common actually with the footer there stretching the full width that we have down at the bottom and then we can do a little bit bit more work inside of here and this is where definitely getting wrappers you're opening closing them all the time like I just said uh so on this one we can go well I want to keep all of this text in there but I don't want this div I want to let that div expand out so because of that then we look inside of this section and we can come here and say this has a div class equals wrapper and I can grab the closing div there and so I want my wrapper to start there but I want it to end before my tbg so I can paste that in and I can tab things over refresh and now that text is good and then I go to here and I have this wide section and maybe I want to keep the wide background but I don't want to keep the wide text another wrapper just wrappers within wrappers or not within each other but wrappers within sections and divs and everything and I think this gives us a good example actually of how many rappers and why first of all they're useful and how often you'll be using them and how you have to think about things a little bit as you're going through using the types of things and then let's just tab this over and then select this and tab that over so we have our background with the tbg then we have my wrapper and then we close the tbg so that means the tbg stays wide but our wrapper inside there is holding all of our content and I've set all of that up here but of course I also have a second page so if we go and take a look at the other page everything is super wide there so on that one we won't do things too complicated but we could just come once again the way way we originally did it a div at the top class is equal to wrapper up here grab that Closing one go to the very bottom of this page I'm actually going to close it before my footer instead of after it even though the design I'm working on doesn't call for that uh but then we get this all coming in here that's looking good and then I get my footer uh down at the bottom which I just realized on the other page was probably off screen a little bit but there we go is coming and is full width uh all the way down there at the bottom with the text being held there you might want a wrapper inside of your footer if you did this we don't have a lot of text so it doesn't really matter but if you had lots of text another wrapper inside of there would probably be appropriate and that is wrappers in action and once again a lot of the time those will be called containers so go with the name that you prefer again I prefer rapper but uh yeah and then just they wrap content hold it prevent it from getting too big allow things to still get smaller