box-sizing and max-width

So, the best way to compensate for padding and border width values, 0:01 expanding the total size of an element, is with a new CSS feature called box-sizing. 0:04 With the box-sizing property, we can alter the way the total width and 0:10 height are calculated. 0:13 So, let's go back to our primary and secondary-content rule. 0:15 And right beneath the width property, let's go ahead and 0:19 add the property box-sizing by typing box-sizing. 0:24 Now, the value border box forces the padding and 0:29 borders into the width and height of the element instead of expanding it. 0:34 So, if we change our width back to the desired value of 960 pixels, 0:38 when we save our style sheet and refresh our page, 0:45 we can see that the final width of the rendered containers is 0:49 now the actual 960 pixel width we defined regardless of that padding value. 0:52 And now we can do the same for our header height. 0:59 So let me copy this box-sizing declaration we just wrote, and 1:01 let's scroll up to our main header rule and paste the box-sizing property. 1:05 So, let's save our style sheet. 1:14 Let's go back to our layout and refresh. 1:16 And when we inspect the header element, 1:19 we can see that it's back to being 850 pixels tall. 1:22 It's no longer affected by that 170 pixels of top padding. 1:25 So, as we can see, box-sizing is wonderful because it dynamically subtracts 1:31 the borders and paddings of each side from the width and height properties we set so 1:36 it makes it easier to define flexible widths and heights in our project. 1:42 Now, the good thing is that we can declare box-sizing once in our 1:47 style sheet with the universal selector, 1:51 then box-sizing will sort of work its magic throughout our project. 1:53 So, let's scroll up to the top of our style sheet. 1:57 And right above the body rule, 2:00 let's create a new rule using the universal selector. 2:02 And inside the universal rule, I'll go ahead and 2:06 paste the box-sizing declaration we copied earlier. 2:09 Now, in the selector stage, I mentioned that the universal selector for 2:13 the most part is considered bad practice. 2:17 Well, universal selectors are bad only when they are misused, but 2:20 I'd say this is a good use case for it. 2:24 So, now with box sizing defined universally, 2:26 it's one less thing to worry about when laying out our page. 2:29 So, now that it's defined up here, we can actually go back and 2:32 remove the repeated box-sizing declarations in our main header rule and 2:36 in our primary-secondary content rule. 2:40 So, let's go ahead and remove it from the main header rule, and 2:43 we'll scroll down and remove it from the primary and secondary-content rules. 2:48 And while we're here, let's change the width back to a percentage value. 2:54 So, instead of 960 pixels, let's now set it to 75%. 3:00 And one last thing we'll need to do for 3:07 our content width is prevent it from becoming too wide. 3:09 Now currently, the width is now set to be 75% of the total browser width, 3:13 so it's very fluid and constantly adjusting to the browser's width. 3:19 But what if we're viewing the page on a screen that's much wider. 3:23 Well, the content may display too wide for good readability in that case. 3:27 So, because of that, 3:33 we're able to limit the width of our content with the max-width property. 3:34 So, let's go back to our primary and secondary-content rule and 3:39 let's give these content elements a max-width property. 3:43 And we don't want them to get any wider than 900 pixels, so 3:49 let's set the max-width value to 900 pixels. 3:54 Now, what this does is, once our content div expands to 900 pixels wide, 3:57 the max-width value sort of overrides that width value. 4:03 So, the elements stay fixed at 900 pixels even if the browser keeps getting wider. 4:07 So, in our browser, notice the content is fluid at 75% of the browser width. 4:14 But once the browser detects that the divs are 900 pixels wide, 4:22 they stop expanding right about here and they remain fixed at 900 pixels. 4:26 So, this prevents the width of our content from becoming wider than it needs to be. 4:31 But if we once again resize the browser to a narrower width, 4:36 the content is once again fluid at 75% wide. 4:41 [BLANK_AUDIO] 4:44 The max-width property is also commonly used to create responsive images. 4:47 Now, you might have noticed that the two images in 4:52 our content at times are too wide for their containing div elements. 4:54 So, for instance, here we're reducing the width of our browser, and 5:00 we can see these images breaking out of their content divs. 5:03 So, to prevent this from happening, 5:07 we can give our image elements a max-width property. 5:09 So, let's go back to our style sheet and let's scroll up here to our base styles. 5:12 So, right here beneath the h3 rule, 5:19 let's target the image elements on our page by using the img type selector. 5:21 Then we're going to add a max-width property and 5:28 we're going to set the max-width to 100%. 5:32 So, when we set this max-width value to 100%, then refresh the page, 5:37 notice how the image is now fluid, and 5:42 it proportionally adjusts according to the width of its containing div. 5:45 So again, a really handy feature for creating responsive imagery. 5:51 And we'll see the benefits of this in a later video when we 5:55 lay these out as columns. 5:58 Now, before we move on, let's go back to our style sheet and apply a bottom margin 6:01 to our images to create some separation between the image and the content below. 6:07 So, right beneath the max width declaration, let's add 6:11 a margin-bottom property and let's set the margin bottom value to 20 pixels. 6:15 [BLANK_AUDIO] 6:21 All right. 6:25 That looks a lot better. 6:26 [BLANK_AUDIO] 6:27