CSS width height overflow

When we use `div`s, it's often
because we want to divide our page

into different boxes, resize those boxes,
and move them around.

It takes a good eye for design to decide
how exactly to lay out a page

so that it looks good.

But right now, we're going to ignore
the goal of making a page look good

and just show you how to change stuff up.

Let's resize the "official-info" `div`.

By default, a div takes up 100 percent
of the available width.

That's why you see the grey box
going across the whole page.

But maybe I only want it
to take up 300 px.

Well, I'll add another property to
the CSS rule up here:

width: 300px;.

That worked, but let's do something
more interesting.

Let's use percentage width,

and say that the div will always take up
70 percent of the available width.

Now the text is constrained
to that smaller box,

and the `div` has gotten taller.

If we really want to, we can also
constrain the height of the box

with the height property:

height: 180px;

Hmm, okay. Something funny happened.

The grey box resized to 180 pixels,

but the text is overflowing
outside of that grey box.

Why'd that happen?

That is because of a property
we call "overflow".

The default value
for `overflow` is `visible`,

which means that the element resizes,
but the content flows outside of it,

which looks a bit silly.

What other options
do we have for overflow?

Well, we can try `hidden`.

That cuts the content off,
trimming it at the border.

That's not what we want though,

because then our viewers won't be able
to read all of amazing official info.

We could also try `auto`,

which tells the browser to add scroll bars
if the content overflows.

Now I can scroll around
inside the box to see the text.

If we want, we can be even more specific:

we can specify different
overflow properties for each direction.

For example, if we wanted

to overflow with scrollbars
in the y direction, up and down,

we'll just:
overflow-y: auto;

but then if we want to trim it
in the x direction,

we can say:
overflow-x: hidden;.

Be careful any time you're using overflow,

because scrollbars can get
really annoying for the user.

Especially scrollbars within scrollbars--

avoid those if you can.

Now going back to width/height--
we can actually use width and height

for all sorts of elements,
like our images.

Now that you know CSS, you can
use the width/height CSS properties

instead of the width/height attributes.

Let's make this cat image a bit bigger
by giving it an id, "cute-cat",

deleting the attribute,

and going up to our style rule, let's say:
#cute-cat {

width: 120px;.

Just like before with attributes,

it's best to only specify
the width or the height,

and let the browser figure out
the best value for the other dimension.

Otherwise, we'll have a squashed kitty!

Well, okay, that sounds kind of awesome,
so let's just try that for a second:

height: 40px;

Haha, squashed kitty-- yay!

Okay, I got that urge out.

I'll be a responsible web developer
and delete it now.

The more knowledge you have,

the more responsibility
you need to take on.

Just because you can
add scrollbars to everything,

and squash all the kitties,
it doesn't mean that you should.

Because you're usually making
websites for other people to use,

and what you think is hilarious
might be what they find super-hard to use.

But if you make a few funny things
here on Khan Academy, I won't mind.