WEBVTT

00:00:00.266 --> 00:00:03.858
When we use `div`s, it's often
because we want to divide our page

00:00:03.858 --> 00:00:07.577
into different boxes, resize those boxes,
and move them around.

00:00:07.737 --> 00:00:11.565
It takes a good eye for design to decide
how exactly to lay out a page

00:00:11.565 --> 00:00:12.719
so that it looks good.

00:00:12.767 --> 00:00:16.484
But right now, we're going to ignore
the goal of making a page look good

00:00:16.484 --> 00:00:18.701
and just show you how to change stuff up.

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

00:00:21.948 --> 00:00:25.539
By default, a div takes up 100 percent
of the available width.

00:00:25.768 --> 00:00:29.054
That's why you see the grey box
going across the whole page.

00:00:29.242 --> 00:00:32.475
But maybe I only want it
to take up 300 px.

00:00:32.715 --> 00:00:36.700
Well, I'll add another property to
the CSS rule up here:

00:00:36.700 --> 00:00:39.373
width: 300px;.

00:00:40.179 --> 00:00:43.154
That worked, but let's do something
more interesting.

00:00:43.380 --> 00:00:44.967
Let's use percentage width,

00:00:44.967 --> 00:00:49.320
and say that the div will always take up
70 percent of the available width.

00:00:50.287 --> 00:00:53.326
Now the text is constrained
to that smaller box,

00:00:53.326 --> 00:00:55.233
and the `div` has gotten taller.

00:00:55.429 --> 00:00:59.136
If we really want to, we can also
constrain the height of the box

00:00:59.136 --> 00:01:00.584
with the height property:

00:01:01.028 --> 00:01:03.231
height: 180px;

00:01:03.778 --> 00:01:06.582
Hmm, okay. Something funny happened.

00:01:06.807 --> 00:01:09.642
The grey box resized to 180 pixels,

00:01:09.642 --> 00:01:13.425
but the text is overflowing
outside of that grey box.

00:01:13.671 --> 00:01:15.507
Why'd that happen?

00:01:15.794 --> 00:01:19.888
That is because of a property
we call "overflow".

00:01:20.335 --> 00:01:23.893
The default value
for `overflow` is `visible`,

00:01:23.893 --> 00:01:28.309
which means that the element resizes,
but the content flows outside of it,

00:01:28.309 --> 00:01:30.118
which looks a bit silly.

00:01:30.455 --> 00:01:32.955
What other options
do we have for overflow?

00:01:33.491 --> 00:01:36.489
Well, we can try `hidden`.

00:01:36.984 --> 00:01:40.144
That cuts the content off,
trimming it at the border.

00:01:40.358 --> 00:01:42.095
That's not what we want though,

00:01:42.095 --> 00:01:45.824
because then our viewers won't be able
to read all of amazing official info.

00:01:46.287 --> 00:01:48.771
We could also try `auto`,

00:01:49.107 --> 00:01:52.896
which tells the browser to add scroll bars
if the content overflows.

00:01:53.078 --> 00:01:56.692
Now I can scroll around
inside the box to see the text.

00:01:57.070 --> 00:01:59.475
If we want, we can be even more specific:

00:01:59.475 --> 00:02:02.712
we can specify different
overflow properties for each direction.

00:02:02.787 --> 00:02:04.177
For example, if we wanted

00:02:04.177 --> 00:02:07.643
to overflow with scrollbars
in the y direction, up and down,

00:02:07.643 --> 00:02:10.509
we'll just:
overflow-y: auto;

00:02:10.832 --> 00:02:14.207
but then if we want to trim it
in the x direction,

00:02:14.207 --> 00:02:16.765
we can say:
overflow-x: hidden;.


00:02:18.500 --> 00:02:21.419
Be careful any time you're using overflow,

00:02:21.419 --> 00:02:24.434
because scrollbars can get
really annoying for the user.

00:02:24.599 --> 00:02:27.215
Especially scrollbars within scrollbars--

00:02:27.215 --> 00:02:28.829
avoid those if you can.

00:02:29.069 --> 00:02:33.974
Now going back to width/height--
we can actually use width and height

00:02:33.974 --> 00:02:37.102
for all sorts of elements,
like our images.

00:02:37.702 --> 00:02:42.168
Now that you know CSS, you can
use the width/height CSS properties

00:02:42.168 --> 00:02:44.649
instead of the width/height attributes.

00:02:44.946 --> 00:02:52.542
Let's make this cat image a bit bigger
by giving it an id, "cute-cat",

00:02:52.542 --> 00:02:55.415
deleting the attribute,

00:02:55.415 --> 00:03:00.396
and going up to our style rule, let's say:
#cute-cat {

00:03:00.396 --> 00:03:03.128
width: 120px;.

00:03:03.585 --> 00:03:06.328
Just like before with attributes,

00:03:06.328 --> 00:03:09.027
it's best to only specify
the width or the height,

00:03:09.027 --> 00:03:12.548
and let the browser figure out
the best value for the other dimension.

00:03:12.618 --> 00:03:14.679
Otherwise, we'll have a squashed kitty!

00:03:14.743 --> 00:03:18.877
Well, okay, that sounds kind of awesome,
so let's just try that for a second:

00:03:18.877 --> 00:03:20.021
height: 40px;

00:03:20.021 --> 00:03:21.726
Haha, squashed kitty-- yay!

00:03:22.059 --> 00:03:25.003
Okay, I got that urge out.

00:03:25.077 --> 00:03:28.793
I'll be a responsible web developer
and delete it now.

00:03:29.009 --> 00:03:30.689
The more knowledge you have,

00:03:30.689 --> 00:03:33.077
the more responsibility
you need to take on.

00:03:33.238 --> 00:03:36.070
Just because you can
add scrollbars to everything,

00:03:36.070 --> 00:03:39.400
and squash all the kitties,
it doesn't mean that you should.

00:03:39.497 --> 00:03:42.578
Because you're usually making
websites for other people to use,

00:03:42.578 --> 00:03:47.338
and what you think is hilarious
might be what they find super-hard to use.

00:03:47.566 --> 00:03:52.323
But if you make a few funny things
here on Khan Academy, I won't mind.