WEBVTT

00:00:00.143 --> 00:00:04.498
I'm laying out a webpage for hopper,
one of our avatars here on Khan Academy.

00:00:04.715 --> 00:00:09.518
It's got an image, some cool links,
and a paragraph.

00:00:10.365 --> 00:00:15.516
I think that this picture of Hopper
would look better next to the paragraph,

00:00:15.516 --> 00:00:17.766
so I'm going to cut

00:00:17.766 --> 00:00:19.991
and paste it down here.

00:00:20.295 --> 00:00:23.561
Hm. Okay, that doesn't look
as good as I hoped it would.

00:00:23.795 --> 00:00:25.873
The text starts
at the bottom of the image.

00:00:26.038 --> 00:00:28.810
I was hoping that the text
would wrap around the image,

00:00:28.810 --> 00:00:30.653
like in newspapers and magazines.

00:00:31.108 --> 00:00:33.960
We'll need a new
CSS property for that: `float`.

00:00:34.070 --> 00:00:37.250
It's a way of floating elements
in and around other elements,

00:00:37.250 --> 00:00:39.825
and it's perfect
for wrapping text around images.

00:00:39.989 --> 00:00:43.957
So we go up to our "pic" rule, and say:
`float: `.

00:00:44.297 --> 00:00:48.083
And then for the value, we need to decide
if we want the picture to float

00:00:48.083 --> 00:00:50.422
to the left-hand side
or the right-hand side.

00:00:50.766 --> 00:00:52.009
Let's try left.

00:00:52.736 --> 00:00:54.467
Great. Perfect.

00:00:54.590 --> 00:00:57.352
Well, okay, not quite perfect,

00:00:57.352 --> 00:01:00.207
because the text
is really close to the image.

00:01:00.317 --> 00:01:02.431
Do you remember
what property we should use

00:01:02.431 --> 00:01:04.443
to separate the text from the image?

00:01:04.763 --> 00:01:07.216
It's part of the box model,
which we just learned.

00:01:07.419 --> 00:01:08.607
Margin.

00:01:08.901 --> 00:01:13.665
Let's add some `margin: right`
and `margin: bottom` to this image

00:01:13.665 --> 00:01:15.504
to give it a little breathing room.

00:01:16.076 --> 00:01:21.978
Ah, okay, that's much better.

00:01:22.272 --> 00:01:26.073
We can also float elements
that aren't images.

00:01:26.610 --> 00:01:28.592
Like if we want something like a sidebar.

00:01:29.077 --> 00:01:31.334
Let's-- what about this list of links?

00:01:31.749 --> 00:01:34.850
We can take this list of links
and float it to the right.

00:01:35.125 --> 00:01:38.098
So let's add a rule for `#hopper-links`,

00:01:38.098 --> 00:01:40.751
and float it to the right.

00:01:41.290 --> 00:01:44.370
Okay, it's floating
but it's taking up a lot of width--

00:01:44.370 --> 00:01:46.439
more than I was hoping it'd take up.

00:01:46.728 --> 00:01:50.515
Let's restrict the width to 30 percent

00:01:50.515 --> 00:01:55.076
so it'll always take up
30 percent of the page,

00:01:55.076 --> 00:01:59.263
and the rest of the page will fill in
the remaining 70 percent.

00:01:59.447 --> 00:02:01.934
Generally, whenever we float a `div`,
we have to give it a width.

00:02:02.115 --> 00:02:04.983
Because otherwise,
`div`s try to take up all of the space,

00:02:04.983 --> 00:02:06.668
and nothing can wrap around them.

00:02:07.113 --> 00:02:10.966
Seems like it also needs a little bit
of a `margin: left`, too.

00:02:11.413 --> 00:02:12.853
Ah, okay.

00:02:13.402 --> 00:02:18.146
Now, notice the footer at the bottom
of the contact info for Hopper.

00:02:18.544 --> 00:02:21.670
It's doing this weird thing where
it's overlapping the sidebar.

00:02:22.118 --> 00:02:23.693
And that's because it's "wrapping".

00:02:24.080 --> 00:02:25.948
We don't want our footer to wrap, though.

00:02:26.161 --> 00:02:28.203
We want it to always be
on the bottom of everything,

00:02:28.203 --> 00:02:29.615
because it's a footer.

00:02:30.042 --> 00:02:32.249
To make it not wrap, we can use
the `clear` property,

00:02:32.249 --> 00:02:34.456


00:02:34.456 --> 00:02:36.575
and put `clear: both`.

00:02:36.863 --> 00:02:37.879
Hah.

00:02:38.114 --> 00:02:40.226
We could use
`clear: left` or `clear: right`

00:02:40.226 --> 00:02:42.086
if we only wanted to not wrap around

00:02:42.086 --> 00:02:44.442
right-floating elements
or left-floating elements.

00:02:44.519 --> 00:02:47.660
But usually we want to not wrap around
any floating elements,

00:02:47.660 --> 00:02:49.054
so we say `clear: both`.

00:02:49.322 --> 00:02:52.127
This is starting to look like
a real webpage.

00:02:52.322 --> 00:02:54.819
We have a main area, a sidebar, a footer.

00:02:55.034 --> 00:03:00.021
In fact, you now know the CSS properties
that make most webpage layouts happen.

00:03:00.283 --> 00:03:04.732
Put together some `div`s with width,
height, padding, margin, float, and clear,

00:03:04.732 --> 00:03:08.379
and there are all sorts
of webpage layouts at your fingertips.