1
00:00:00,000 --> 00:00:04,780
[MUSIC]

2
00:00:04,780 --> 00:00:06,240
Hey, everyone, Guil here.

3
00:00:06,240 --> 00:00:09,780
It's time to practice the basics of
CSS floats, a commonly used method for

4
00:00:09,780 --> 00:00:12,685
laying out parts of a webpage and
wrapping content around elements.

5
00:00:12,685 --> 00:00:15,865
You're going to lay out portions
of this webpage using floats.

6
00:00:15,865 --> 00:00:18,215
To get started,
launch the workspace with this video.

7
00:00:18,215 --> 00:00:22,645
I have already included an HTML and
CSS file for this exercise.

8
00:00:22,645 --> 00:00:26,735
And one of the style sheets linked to the
HTML already includes the base styles and

9
00:00:26,735 --> 00:00:28,865
some of the layout styles for the page.

10
00:00:28,865 --> 00:00:30,215
Now let's walk through
what you'll need to do.

11
00:00:31,385 --> 00:00:34,260
In the file floats.css,

12
00:00:34,260 --> 00:00:38,810
you'll see six comments with instructions
on the CSS styles you'll need to write.

13
00:00:38,810 --> 00:00:45,050
So first, you'll apply a float
to li tags inside nav and you'll

14
00:00:45,050 --> 00:00:49,860
need to make sure the floats follow other
HTML source order from left to right.

15
00:00:49,860 --> 00:00:55,546
In HTML, the image inside the first
article has a class of img-featured.

16
00:00:55,546 --> 00:01:00,610
So you're going to float this image,
so that content flows around

17
00:01:00,610 --> 00:01:05,100
its left side, then to create visual
separation between the content and

18
00:01:05,100 --> 00:01:10,850
image, apply a 15 pixel margin to the top,
bottom, and left sides of the image.

19
00:01:10,850 --> 00:01:16,280
The next two images on the page
have a class of image article,

20
00:01:16,280 --> 00:01:19,010
so you'll target those images and
float them so

21
00:01:19,010 --> 00:01:24,700
that content flows along their right side,
then apply a 20 pixel right margin.

22
00:01:26,030 --> 00:01:31,705
Next to the two bottom images, you'll
see a div with a class article content.

23
00:01:31,705 --> 00:01:34,055
So, you'll float article content, so

24
00:01:34,055 --> 00:01:37,445
that it's positioned on
the same line as img-article.

25
00:01:37,445 --> 00:01:42,075
That also means that you'll need to adjust
the width of the article content div, so

26
00:01:42,075 --> 00:01:44,485
that both elements can fit on
the same line side by side.

27
00:01:45,720 --> 00:01:49,140
Now, at this point, you'll have
noticed that floating the images and

28
00:01:49,140 --> 00:01:52,930
divs collapsed the height of
the parent article containers.

29
00:01:52,930 --> 00:01:55,800
So, you'll use one of techniques
you learned to clear or

30
00:01:55,800 --> 00:01:58,780
open up the collapsed space
around floated elements.

31
00:01:58,780 --> 00:02:02,410
I've included this group utility
class to help you out with that.

32
00:02:02,410 --> 00:02:06,410
And finally, you'll center align
the navigation inside the header.

33
00:02:06,410 --> 00:02:09,360
I've posted resources that can help
you solve this part of the challenge

34
00:02:09,360 --> 00:02:10,680
in the teacher's notes.

35
00:02:10,680 --> 00:02:13,210
The goal is to get your page
layout to look like this.

36
00:02:14,600 --> 00:02:16,840
This is a great way to practice
what you've learned so

37
00:02:16,840 --> 00:02:19,040
far about CSS layout and floats.

38
00:02:19,040 --> 00:02:22,210
Good luck, have fun, and in the next
video, I'll walk you through the solution.