0:00:00.266,0:00:03.858
When we use `div`s, it's often[br]because we want to divide our page

0:00:03.858,0:00:07.577
into different boxes, resize those boxes,[br]and move them around.

0:00:07.737,0:00:11.565
It takes a good eye for design to decide[br]how exactly to lay out a page

0:00:11.565,0:00:12.719
so that it looks good.

0:00:12.767,0:00:16.484
But right now, we're going to ignore[br]the goal of making a page look good

0:00:16.484,0:00:18.701
and just show you how to change stuff up.

0:00:18.841,0:00:21.652
Let's resize the "official-info" `div`.

0:00:21.948,0:00:25.539
By default, a div takes up 100 percent[br]of the available width.

0:00:25.768,0:00:29.054
That's why you see the grey box[br]going across the whole page.

0:00:29.242,0:00:32.475
But maybe I only want it[br]to take up 300 px.

0:00:32.715,0:00:36.700
Well, I'll add another property to[br]the CSS rule up here:

0:00:36.700,0:00:39.373
width: 300px;.

0:00:40.179,0:00:43.154
That worked, but let's do something[br]more interesting.

0:00:43.380,0:00:44.967
Let's use percentage width,

0:00:44.967,0:00:49.320
and say that the div will always take up[br]70 percent of the available width.

0:00:50.287,0:00:53.326
Now the text is constrained[br]to that smaller box,

0:00:53.326,0:00:55.233
and the `div` has gotten taller.

0:00:55.429,0:00:59.136
If we really want to, we can also[br]constrain the height of the box

0:00:59.136,0:01:00.584
with the height property:

0:01:01.028,0:01:03.231
height: 180px;

0:01:03.778,0:01:06.582
Hmm, okay. Something funny happened.

0:01:06.807,0:01:09.642
The grey box resized to 180 pixels,

0:01:09.642,0:01:13.425
but the text is overflowing[br]outside of that grey box.

0:01:13.671,0:01:15.507
Why'd that happen?

0:01:15.794,0:01:19.888
That is because of a property[br]we call "overflow".

0:01:20.335,0:01:23.893
The default value[br]for `overflow` is `visible`,

0:01:23.893,0:01:28.309
which means that the element resizes,[br]but the content flows outside of it,

0:01:28.309,0:01:30.118
which looks a bit silly.

0:01:30.455,0:01:32.955
What other options[br]do we have for overflow?

0:01:33.491,0:01:36.489
Well, we can try `hidden`.

0:01:36.984,0:01:40.144
That cuts the content off,[br]trimming it at the border.

0:01:40.358,0:01:42.095
That's not what we want though,

0:01:42.095,0:01:45.824
because then our viewers won't be able[br]to read all of amazing official info.

0:01:46.287,0:01:48.771
We could also try `auto`,

0:01:49.107,0:01:52.896
which tells the browser to add scroll bars[br]if the content overflows.

0:01:53.078,0:01:56.692
Now I can scroll around[br]inside the box to see the text.

0:01:57.070,0:01:59.475
If we want, we can be even more specific:

0:01:59.475,0:02:02.712
we can specify different[br]overflow properties for each direction.

0:02:02.787,0:02:04.177
For example, if we wanted

0:02:04.177,0:02:07.643
to overflow with scrollbars[br]in the y direction, up and down,

0:02:07.643,0:02:10.509
we'll just:[br]overflow-y: auto;

0:02:10.832,0:02:14.207
but then if we want to trim it[br]in the x direction,

0:02:14.207,0:02:16.765
we can say:[br]overflow-x: hidden;.[br]

0:02:18.500,0:02:21.419
Be careful any time you're using overflow,

0:02:21.419,0:02:24.434
because scrollbars can get[br]really annoying for the user.

0:02:24.599,0:02:27.215
Especially scrollbars within scrollbars--

0:02:27.215,0:02:28.829
avoid those if you can.

0:02:29.069,0:02:33.974
Now going back to width/height--[br]we can actually use width and height

0:02:33.974,0:02:37.102
for all sorts of elements,[br]like our images.

0:02:37.702,0:02:42.168
Now that you know CSS, you can[br]use the width/height CSS properties

0:02:42.168,0:02:44.649
instead of the width/height attributes.

0:02:44.946,0:02:52.542
Let's make this cat image a bit bigger[br]by giving it an id, "cute-cat",

0:02:52.542,0:02:55.415
deleting the attribute,

0:02:55.415,0:03:00.396
and going up to our style rule, let's say:[br]#cute-cat {

0:03:00.396,0:03:03.128
width: 120px;.

0:03:03.585,0:03:06.328
Just like before with attributes,

0:03:06.328,0:03:09.027
it's best to only specify[br]the width or the height,

0:03:09.027,0:03:12.548
and let the browser figure out[br]the best value for the other dimension.

0:03:12.618,0:03:14.679
Otherwise, we'll have a squashed kitty!

0:03:14.743,0:03:18.877
Well, okay, that sounds kind of awesome,[br]so let's just try that for a second:

0:03:18.877,0:03:20.021
height: 40px;

0:03:20.021,0:03:21.726
Haha, squashed kitty-- yay!

0:03:22.059,0:03:25.003
Okay, I got that urge out.

0:03:25.077,0:03:28.793
I'll be a responsible web developer[br]and delete it now.

0:03:29.009,0:03:30.689
The more knowledge you have,

0:03:30.689,0:03:33.077
the more responsibility[br]you need to take on.

0:03:33.238,0:03:36.070
Just because you can[br]add scrollbars to everything,

0:03:36.070,0:03:39.400
and squash all the kitties,[br]it doesn't mean that you should.

0:03:39.497,0:03:42.578
Because you're usually making[br]websites for other people to use,

0:03:42.578,0:03:47.338
and what you think is hilarious[br]might be what they find super-hard to use.

0:03:47.566,0:03:52.323
But if you make a few funny things[br]here on Khan Academy, I won't mind.