1
00:00:00,143 --> 00:00:04,498
I'm laying out a webpage for hopper,
one of our avatars here on Khan Academy.

2
00:00:04,715 --> 00:00:09,518
It's got an image, some cool links,
and a paragraph.

3
00:00:10,365 --> 00:00:15,516
I think that this picture of Hopper
would look better next to the paragraph,

4
00:00:15,516 --> 00:00:17,766
so I'm going to cut

5
00:00:17,766 --> 00:00:19,991
and paste it down here.

6
00:00:20,295 --> 00:00:23,561
Hm. Okay, that doesn't look
as good as I hoped it would.

7
00:00:23,795 --> 00:00:25,873
The text starts
at the bottom of the image.

8
00:00:26,038 --> 00:00:28,810
I was hoping that the text
would wrap around the image,

9
00:00:28,810 --> 00:00:30,653
like in newspapers and magazines.

10
00:00:31,108 --> 00:00:33,960
We'll need a new
CSS property for that: `float`.

11
00:00:34,070 --> 00:00:37,250
It's a way of floating elements
in and around other elements,

12
00:00:37,250 --> 00:00:39,825
and it's perfect
for wrapping text around images.

13
00:00:39,989 --> 00:00:43,957
So we go up to our "pic" rule, and say:
`float: `.

14
00:00:44,297 --> 00:00:48,083
And then for the value, we need to decide
if we want the picture to float

15
00:00:48,083 --> 00:00:50,422
to the left-hand side
or the right-hand side.

16
00:00:50,766 --> 00:00:52,009
Let's try left.

17
00:00:52,736 --> 00:00:54,467
Great. Perfect.

18
00:00:54,590 --> 00:00:57,352
Well, okay, not quite perfect,

19
00:00:57,352 --> 00:01:00,207
because the text
is really close to the image.

20
00:01:00,317 --> 00:01:02,431
Do you remember
what property we should use

21
00:01:02,431 --> 00:01:04,443
to separate the text from the image?

22
00:01:04,763 --> 00:01:07,216
It's part of the box model,
which we just learned.

23
00:01:07,419 --> 00:01:08,607
Margin.

24
00:01:08,901 --> 00:01:13,665
Let's add some `margin: right`
and `margin: bottom` to this image

25
00:01:13,665 --> 00:01:15,504
to give it a little breathing room.

26
00:01:16,076 --> 00:01:21,978
Ah, okay, that's much better.

27
00:01:22,272 --> 00:01:26,073
We can also float elements
that aren't images.

28
00:01:26,610 --> 00:01:28,592
Like if we want something like a sidebar.

29
00:01:29,077 --> 00:01:31,334
Let's-- what about this list of links?

30
00:01:31,749 --> 00:01:34,850
We can take this list of links
and float it to the right.

31
00:01:35,125 --> 00:01:38,098
So let's add a rule for `#hopper-links`,

32
00:01:38,098 --> 00:01:40,751
and float it to the right.

33
00:01:41,290 --> 00:01:44,370
Okay, it's floating
but it's taking up a lot of width--

34
00:01:44,370 --> 00:01:46,439
more than I was hoping it'd take up.

35
00:01:46,728 --> 00:01:50,515
Let's restrict the width to 30 percent

36
00:01:50,515 --> 00:01:55,076
so it'll always take up
30 percent of the page,

37
00:01:55,076 --> 00:01:59,263
and the rest of the page will fill in
the remaining 70 percent.

38
00:01:59,447 --> 00:02:01,934
Generally, whenever we float a `div`,
we have to give it a width.

39
00:02:02,115 --> 00:02:04,983
Because otherwise,
`div`s try to take up all of the space,

40
00:02:04,983 --> 00:02:06,668
and nothing can wrap around them.

41
00:02:07,113 --> 00:02:10,966
Seems like it also needs a little bit
of a `margin: left`, too.

42
00:02:11,413 --> 00:02:12,853
Ah, okay.

43
00:02:13,402 --> 00:02:18,146
Now, notice the footer at the bottom
of the contact info for Hopper.

44
00:02:18,544 --> 00:02:21,670
It's doing this weird thing where
it's overlapping the sidebar.

45
00:02:22,118 --> 00:02:23,693
And that's because it's "wrapping".

46
00:02:24,080 --> 00:02:25,948
We don't want our footer to wrap, though.

47
00:02:26,161 --> 00:02:28,203
We want it to always be
on the bottom of everything,

48
00:02:28,203 --> 00:02:29,615
because it's a footer.

49
00:02:30,042 --> 00:02:32,249
To make it not wrap, we can use
the `clear` property,

50
00:02:32,249 --> 00:02:34,456


51
00:02:34,456 --> 00:02:36,575
and put `clear: both`.

52
00:02:36,863 --> 00:02:37,879
Hah.

53
00:02:38,114 --> 00:02:40,226
We could use
`clear: left` or `clear: right`

54
00:02:40,226 --> 00:02:42,086
if we only wanted to not wrap around

55
00:02:42,086 --> 00:02:44,442
right-floating elements
or left-floating elements.

56
00:02:44,519 --> 00:02:47,660
But usually we want to not wrap around
any floating elements,

57
00:02:47,660 --> 00:02:49,054
so we say `clear: both`.

58
00:02:49,322 --> 00:02:52,127
This is starting to look like
a real webpage.

59
00:02:52,322 --> 00:02:54,819
We have a main area, a sidebar, a footer.

60
00:02:55,034 --> 00:03:00,021
In fact, you now know the CSS properties
that make most webpage layouts happen.

61
00:03:00,283 --> 00:03:04,732
Put together some `div`s with width,
height, padding, margin, float, and clear,

62
00:03:04,732 --> 00:03:08,379
and there are all sorts
of webpage layouts at your fingertips.