7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 9Length: 43 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Full-Width Boxes

By default, if there is enough content within a box, the box will span the full width of its parent container. However, the box will behave differently if you specify 100% width. In this lesson, I’ll demonstrate the differences.

2.3 Full-Width Boxes

Hello and welcome back to understanding the CSS box model. In this lesson, we're going to take a closer look at how full width content is going to be affected by the box model if we don't specify the width of our content, then the content is going to take up as much width as it is allowed. So if we have a div inside of another div and the outer div has been a given a specific width, but the inner div does not have a specific width, then the inner div is going to take up the full width or it's going to take up the same amount of space as it's parent. And we can see an example of this In our project files folder. You'll find a file there called full-width-box-start.html. That's the file we're gonna be starting with in this lesson. So we're gonna open that up in a text editor. I'm using Brackets. It is a free text editor and I really like some of the features that it has. But as you can see here, we have a very simple HTML document that contains an h2, and then a few paragraphs. But more importantly, I want you to take a look at the way it's structured. This article here is contained within an article element, with a class of feature article, and that article is nested inside a div with a class of main-content. Also you'll notice in the head of the document, we have a style tag here, and usually I would put my styles in a separate document, but for the sake of simplicity in this course, I'm going to keep it in the same document. Here we have a rule for the main content class, which is the container div that contains our article. And we've given that main content div a width of 800 pixels, a margin of zero autos, so that it will be centered in the browser, and a background color of #eee, just so that we can see it a little bit better on the page. So let's take a look at that In our browser. I'm going to jump into Chrome. And here we can see our HTML file. Now remember, we gave that gray background to our container div, and inside that container div we have an article element. And as you can see here, that article element is taking up the full width of that container div, and so by default, whenever you place one block level element inside another block level element, the inner element is going to take up the full width of the parent element. And since we've specified that this parent element has a width of 800 pixels, then the content inside it is going to take up all 800 pixels of that width as well. Now what happens if we add padding to this article? Let's go back up to our styles and our article has a class of feature-article, so I'm going to create a rule for that class. So I'll type dot feature hyphen article, and then our opening and closing curly brackets, and inside those curly brackets I'm going to add padding of let's do 50 pixels just to make it really obvious. Well now that I've made a change to that file, I'm going to save it with a new name so that we don't save over our original file. And I'm going to save this as full width box in that html. So this is the file that we'll end with once we're done with all of the changes we're going to make in this lesson. So we've added a padding of 50 pixels, let's jump into Chrome and let's navigate to the end, that html file, and now you'll see that the content inside has shrunk down within the confines of that padding, so if we go back to our previous file and watch the borders, the left and right edges of our content here the grey background. You'll notice it doesn't get any wider, and we've talked before about how when you add padding to a box, that box is going to get larger. While this is one exception to that rule. If you don't specify the width of the item that you're adding the padding to, then the content inside of that item will sometimes get smaller to allow for that padding, and we saw that here, so again if we go back to our start file, we can see that our content runs right up against the edge, but, once we add the padding, the content or the box doesn't get larger, instead, the content inside the box gets smaller. So, even though our content is defaulting to one hundred percent of the width of its parent element, it's not getting larger once we add padding to it. But the reason I want to point that out is because if we do specify the width of our feature article, if we do specify that we want it to take up 100% of the width of our parent element, then things are going to behave a little bit differently. If we were to save our file now and jump back into our browser, when we refresh, you'll see a whole different story. We still have the same amount of padding over here on the left, but on the right, as you can see, our text is running off the edge of our background. If you ever see this happen and you're using Chrome, one of the easiest ways to see what's going on there is to simply inspect that element. We can right click anywhere in that element and click on Inspect element, and that will open up our Web Developer tools. And we can hover over that paragraph and see that it's running beyond the edges. We can also go up to the article itself and that's where we really see the differences taking place. The green area around the edges represents the padding that we added. And so since we had 40 pixels of padding added to the left edge of our article, it's nudging all the content over 40 pixels. So our content over here is running off the edge of our background by 40 pixels. And then to the right of that there's 40 more pixels of padding added on. So what we've done here is we've told our browser that we want this article to definitely take up 100% of the width of its parent. So no matter what we do now, that content by itself is going to take up that full 800 pixels, regardless of any padding or borders that we add. And if we do add padding and borders and margins, then it's just going to get even wider. So that's the difference between allowing your content to default to 100% of the width, and specifying 100% of the width. If you specify 100% of the width, and then add padding, then your final result is going to be more than 100% of the width. And it may seem like a really simple illustration, but that's something that trips up a lot of beginning designers and front end developers. They'll come to their page and they'll see their text running beyond the edges and they won't know what's wrong. And it's important to understand how this box model works so that we can avoid problems like this. So thank you for watching, and I'll see you in the next lesson.

Back to the top