[MUSIC]

So, now let's see how everything we've learned so

far about the box model applies to building a basic layout.

So, by default, an element's width and height are as wide or

as tall as the content it holds.

But we're also able to set our own dimensions using the width and

height properties.

Now, the width and height properties can accept length units such as pixels,

ems, or percentages and their values.

In the previous stage, we learned that when we use a percentage value for

width, the width is measured relative to the parent element's width.

So, the 60% width value we gave our primary and secondary-content

divs earlier adjust based on the parent body element, which is 100% by default.

But pixel values are still commonly used for layout because, as we've learned in

previous videos, they allow us precise control over the size of an element.

For instance, you'll notice this large arrow image in our header.

Now, the arrow image is embedded as an SVG, or Scalable Vector Graphics.

So, we'll need to scale it down with a width property.

So, let's give the image element on line ten a class of arrow.

So, now let's save our index.html file and go back to our style sheet.

And all the way at the bottom underneath the wildlife rule, let's go ahead and

target that new arrow class.

And we're gonna give our arrow rule a width property, and

let's set the value to 50 pixels.

So let's save our style sheet, and

go back to the browser preview and refresh the page.

So, now we can see how our arrow image is now

scaled down to 50 pixels wide while maintaining its proportions.

So, next for our Lake Tahoe page design,

we'll want to increase the height of our main header element.

So, let's do that with a height property.

We'll go back to our style sheet, and

let's scroll up to the main header rule right here under Main Styles.

And right beneath the background-color property, let's add a height property.

And we're going to set the height value to 850 pixels.

All right, so let's take a look.

We'll save our style sheet and refresh the page, and

now we see how our header is much taller.

And we're going to use this space later when we

add a nice background image to our header.

Keep in mind that when a width or height is defined on a element, we're not exactly

defining the entire area of the box, meaning the content, padding and borders.

We're actually just defining the width for the content area itself, and

this can actually create some issues, especially when building layouts.

I'll show you what I mean.

So, let's go back to our main header rule, and we're gonna add a padding-top

property, and we're going to set the top padding to 170 pixels.

Now, when we add the top padding,

notice how the height of the header increases by 170 pixels.

And if we once again open up our Chrome developer tools by clicking the right top

icon menu here, then highlighting More tools, then clicking Developer tools,

when we inspect the height of our header, notice how instead of being 850 pixels

tall like we need it to be, our header's actually 1,020 pixels tall.

Well, that's happening because the browser, based on the box model,

calculates a total height value by taking the height value we define and

adding the padding-top value and any padding-bottom or any top and

bottom border styles we define.

So, if we were to add borders to our header or

bottom padding, the total height would increase based on those additional values.

And if we scroll down, we're also seeing that happening in our wildlife container.

The top border and

padding values are increasing of the total height of the element.

And the same issue that happens with height also happens with

the total width value of an element.

And this can make our layout elements wider than they need to be.

I'll show you a good example of this.

So first, let's go back to our style sheet, and let's find our primary and

secondary-content rules right here under Layout Styles.

And let's set their width back to a fixed width of 960 pixels.

So, we're going to replace the 60% width value to 960 pixels.

So now if we save our style sheet and refresh the browser,

we can see that our secondary and primary-content is our 960 pixels wide.

But now, we'll want to add left and right padding to the content divs just to

have a little separation between the content page and the margins.

So, let's go back to our primary and secondary-content rule, and

right beneath the width property, let's add a padding-left property,

and let's set the value to 50 pixels.

And right below that, let's add a padding-right property, and

let's set the value to 50 pixels as well.

So now when we save our style sheet and

take a look at our layout, and refresh the page, and once again,

use the dev tools to inspect the primary or secondary-content containers,

notice how the total width now expands to 1,060 pixels wide.

It's adding 100 pixels to the total width because we've added 50 pixels of

padding to the left and right sides of the div.

So, like with the height property, the browser calculates the total width value

by adding the width value we define with any left or

right padding and border width values.

So, with all that being said,

what if we need these container divs to be exactly the width and height we specified?

And we actually do in our case.

Well, we could do a bit of math and maybe subtract the padding or

border widths from the total width or height volume we defined.

For instance, instead of 960 pixels, we can set the width value here

to 860 pixels to compensate for that extra 100 pixels of padding.

Well, sure, this works just fine, but imagine having to do this for

every element in our layout that has a width, height, or padding and

border width defined, right?

Well, in the next video, we're gonna learn a better solution for this.