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.