0:00:00.143,0:00:04.498
I'm laying out a webpage for hopper,[br]one of our avatars here on Khan Academy.

0:00:04.715,0:00:09.518
It's got an image, some cool links,[br]and a paragraph.

0:00:10.365,0:00:15.516
I think that this picture of Hopper[br]would look better next to the paragraph,

0:00:15.516,0:00:17.766
so I'm going to cut

0:00:17.766,0:00:19.991
and paste it down here.

0:00:20.295,0:00:23.561
Hm. Okay, that doesn't look[br]as good as I hoped it would.

0:00:23.795,0:00:25.873
The text starts[br]at the bottom of the image.

0:00:26.038,0:00:28.810
I was hoping that the text[br]would wrap around the image,

0:00:28.810,0:00:30.653
like in newspapers and magazines.

0:00:31.108,0:00:33.960
We'll need a new[br]CSS property for that: `float`.

0:00:34.070,0:00:37.250
It's a way of floating elements[br]in and around other elements,

0:00:37.250,0:00:39.825
and it's perfect[br]for wrapping text around images.

0:00:39.989,0:00:43.957
So we go up to our "pic" rule, and say:[br]`float: `.

0:00:44.297,0:00:48.083
And then for the value, we need to decide[br]if we want the picture to float

0:00:48.083,0:00:50.422
to the left-hand side[br]or the right-hand side.

0:00:50.766,0:00:52.009
Let's try left.

0:00:52.736,0:00:54.467
Great. Perfect.

0:00:54.590,0:00:57.352
Well, okay, not quite perfect,

0:00:57.352,0:01:00.207
because the text[br]is really close to the image.

0:01:00.317,0:01:02.431
Do you remember[br]what property we should use

0:01:02.431,0:01:04.443
to separate the text from the image?

0:01:04.763,0:01:07.216
It's part of the box model,[br]which we just learned.

0:01:07.419,0:01:08.607
Margin.

0:01:08.901,0:01:13.665
Let's add some `margin: right`[br]and `margin: bottom` to this image

0:01:13.665,0:01:15.504
to give it a little breathing room.

0:01:16.076,0:01:21.978
Ah, okay, that's much better.

0:01:22.272,0:01:26.073
We can also float elements[br]that aren't images.

0:01:26.610,0:01:28.592
Like if we want something like a sidebar.

0:01:29.077,0:01:31.334
Let's-- what about this list of links?

0:01:31.749,0:01:34.850
We can take this list of links[br]and float it to the right.

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

0:01:38.098,0:01:40.751
and float it to the right.

0:01:41.290,0:01:44.370
Okay, it's floating[br]but it's taking up a lot of width--

0:01:44.370,0:01:46.439
more than I was hoping it'd take up.

0:01:46.728,0:01:50.515
Let's restrict the width to 30 percent

0:01:50.515,0:01:55.076
so it'll always take up[br]30 percent of the page,

0:01:55.076,0:01:59.263
and the rest of the page will fill in[br]the remaining 70 percent.

0:01:59.447,0:02:01.934
Generally, whenever we float a `div`,[br]we have to give it a width.

0:02:02.115,0:02:04.983
Because otherwise,[br]`div`s try to take up all of the space,

0:02:04.983,0:02:06.668
and nothing can wrap around them.

0:02:07.113,0:02:10.966
Seems like it also needs a little bit[br]of a `margin: left`, too.

0:02:11.413,0:02:12.853
Ah, okay.

0:02:13.402,0:02:18.146
Now, notice the footer at the bottom[br]of the contact info for Hopper.

0:02:18.544,0:02:21.670
It's doing this weird thing where[br]it's overlapping the sidebar.

0:02:22.118,0:02:23.693
And that's because it's "wrapping".

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

0:02:26.161,0:02:28.203
We want it to always be[br]on the bottom of everything,

0:02:28.203,0:02:29.615
because it's a footer.

0:02:30.042,0:02:32.249
To make it not wrap, we can use[br]the `clear` property,

0:02:32.249,0:02:34.456


0:02:34.456,0:02:36.575
and put `clear: both`.

0:02:36.863,0:02:37.879
Hah.

0:02:38.114,0:02:40.226
We could use[br]`clear: left` or `clear: right`

0:02:40.226,0:02:42.086
if we only wanted to not wrap around

0:02:42.086,0:02:44.442
right-floating elements[br]or left-floating elements.

0:02:44.519,0:02:47.660
But usually we want to not wrap around[br]any floating elements,

0:02:47.660,0:02:49.054
so we say `clear: both`.

0:02:49.322,0:02:52.127
This is starting to look like[br]a real webpage.

0:02:52.322,0:02:54.819
We have a main area, a sidebar, a footer.

0:02:55.034,0:03:00.021
In fact, you now know the CSS properties[br]that make most webpage layouts happen.

0:03:00.283,0:03:04.732
Put together some `div`s with width,[br]height, padding, margin, float, and clear,

0:03:04.732,0:03:08.379
and there are all sorts[br]of webpage layouts at your fingertips.